天道酬勤,学无止境

ReactJS:将输入值保存在模糊上,而不是每次击键上(ReactJS: Save input value on blur and not on every key stroke)

问题

我创建了一个 React 视图,比如MyView ,它有 2 个文本输入,其初始值将由从数据库读取的父级传递。

我还希望将更改的值保存回数据库。 因此,视图也传递了一个相同的回调函数。

考虑到数据库保存操作很繁重,您不应该经常这样做。 因此,我决定在输入框上监听onBlur事件而不是onChange事件,因为在每次击键时都会调用onChange

第一种方法:

class MyView extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
              <input type="url" value={this.props.values.A}
                   onBlur={(evt)=>{this.props.saveValue('A', evt.target.value)}} />
              <input type="url" value={this.props.values.B}
                   onBlur={(evt)=>{this.props.saveValue('B', evt.target.value)}} />         

              <button type="button" onClick={this.props.resetValues}>Reset</button>
            </div>
        );
     }
}

但是,这不起作用,因为React强制一个受控输入(带有value属性)总是伴随着一个onChange监听器。

第二种方法:

因此,我尝试将这些输入设置为uncontrolled 。 也就是说,使用defaultValue代替value属性。

<input type="url" defaultValue={this.props.values.A}
       onBlur={(evt)=>{this.props.saveValue('A', evt.target.value)}} />

但这也不起作用,因为单击重置/清除按钮,虽然视图被重新渲染但defaultValue在视图创建后不会更新。

第三种方法:

所以,我最后添加了一个onChange监听器,但没有操作。

<input type="url" value={this.props.values.A}
       onChange={()=>{console.log('do nothing')}
       onBlur={(evt)=>{this.props.saveValue('A', evt.target.value)}} />

同样,这不起作用,因为视图在调用onChange后重新呈现,并且由于 value 尚未反映在props ,因此value似乎在每次击键时重置回初始value

第四种方法:

最后我尝试的是在组件中维护一个state并从状态中读取值,并在每次onChange将值保存回状态。 这在很大程度上是有效的,但是只要对 props 进行了外部更改并且重新渲染了视图, state就不会更新。 所以,我添加了一个getDerivedStateFromProps函数来查看:

static getDerivedStateFromProps(props, state) {
    return props.values;
}

现在,这又不起作用了。 原因是即使我暂时将值保存到 state 并且 state 被重置为 props 中的初始值,也会调用此函数。

一些 ReactJS 专家可以帮助我解决我的用例吗?

回答1

您仍然需要onChange来帮助您设置两个 url 输入的状态。 onBlur仅用于触发保存,它是用于不同目的的 2 个不同事件。

由于您的 A & B 值是从父组件传递下来的。 MyView的父组件应该传递this.state.values和设置状态的函数。

如果所有内容都在单个组件中,请参阅此代码段。 您应该能够将handleChange函数向上移动到其父组件。

 class App extends React.Component { state = { values: { A: '', B: '' } } handleChange = e => { this.setState({ values: { ...this.state.values, [e.target.name]: e.target.value }) } handleBlur = e => { if (e.target.name === 'A') { alert(`Saving A: ${this.state.values.A}`) } if (e.target.name === 'B') { alert(`Saving B: ${this.state.values.B}`) } } render() { return ( <div> <label>Value A</label> <input type="url" name="A" value={this.state.values.B} onChange={this.handleChange} onBlur={this.handleBlur} /> <label>Value B</label> <input type="url" name="B" value={this.state.values.A} onChange={this.handleChange} onBlur={this.handleBlur} /> </div> ) } } ReactDOM.render( <App />, document.getElementById('container') );
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"> </div>

编辑:您的第四种方法应该适用于以下内容:

static getDerivedStateFromProps(props, state) {
  return { values: props.values }
}

constructor(props) {
  super(props)
  this.state = {
    values: props.values
  }
}

所以基本上this.state.values是最终的真相来源。 当用户键入的东西,你setState在此组件和改变它。 但是如果props.values发生变化(来自外部源), getDerivedStateFromProps将更新值状态。

回答2

根据 Liren Yeo 解决方案的评论,我将处理componentDidUpdate上的 props-state 协调,您可以在其中获得旧stateprops 。 通过这种方式,您可以确定this.props更新方式并采取相应措施。 当props中的值与stateoldProps不匹配时,更新是外部的,您应该覆盖状态中未保存的更改。

代码应该看起来像这样

componentDidUpdate(prevProps) {

if (this.props.values !== prevProps.values && this.props.values !== this.state.values) {
  this.setState({values:this.props.values});
   }
}

如果你走这条路,你也可以让输入uncontrolled并通过引用更新它的值。 这解决了controlled输入的一些不可靠性问题,例如,当您键入十进制逗号时, type='number'返回undefined作为其值。 您仍然需要存储值onChange但只需将其保存onBlur并在componentDidUpdate处理 state-prop-dom 协调

回答3

因此,考虑到 onChange 有效,我建议您看一下:

https://schier.co/blog/2014/12/08/wait-for-user-to-stop-typing-using-javascript.html 导航到标题:等待输入停止

希望它能以某种方式引导您实现您想要实现的目标。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • ReactJs:尽管事件已正确触发,但下拉事件值仍设置为空字符串(ReactJs : DropDown Event Value gets set to empty string despite the event having been triggered correctly)
    问题 OperationSavDetails.js class OperationSavDetails extends Component { constructor(props) { super(props); this.state = { statusUpdateDropDownOpen: false, statusUpdateDropDownValue: "Mettre à jour le status de l'opération SAV" }; this.changeStatusUpdateDropDownValue = this.changeStatusUpdateDropDownValue.bind( this ); this.toggleStatusUpdateDropDown = this.toggleStatusUpdateDropDown.bind( this ); } changeStatusUpdateDropDownValue(e) { console.log("e.currentTarget.textContent"); console.log(e.currentTarget.textContent); this.setState({ statusUpdateDropDownValue: e.currentTarget.textContent });
  • 在React中,onChange和onInput有什么区别?(In React, what's the difference between onChange and onInput?)
    问题 我尝试过寻找答案,但是大多数都在React上下文之外,其中onChange会在模糊时触发。 在执行各种测试时,我似乎无法分辨这两个事件(应用于文本区域时)有何不同。 谁能对此有所启发? 回答1 似乎没有真正的区别 由于某种原因,React将Component.onChange侦听器附加到DOM element.oninput事件。 请参阅表单文档中的注释: React Docs-表格 有更多的人对此行为感到惊讶。 有关更多详细信息,请在React问题跟踪器上参考此问题: 记录React的onChange与onInput#3964的关系 引用关于该问题的评论: 我不明白为什么React选择让onChange像onInput那样表现。 据我所知,我们无法恢复旧的onChange行为。 Docs声称这是一个“错误用语”,但事实并非如此,它会在发生更改时触发,只是直到输入也失去焦点为止。 为了进行验证,有时我们不希望在输入完毕后显示验证错误。 或者,也许我们只是不想在每次击键时都重新渲染。 现在唯一的方法是使用onBlur,但现在我们还需要检查该值是否已手动更改。 没什么大不了的,但是在我看来,React抛弃了一个有用的事件,并且在已经有一个事件可以执行时却偏离了标准行为。 我同意100%的评论...但是我想现在更改它会带来比解决方案更多的问题,因为已经编写了太多依赖此行为的代码。
  • React中的受控组件与非受控组件(Controlled vs uncontrolled components in React)
    问题 几乎在每个ReactJS教程中,甚至在用于处理输入更改的官方文档中,都建议使用onChange。 我们使用状态作为值,并通过onChange对其进行更改。 这将在每个按键中触发渲染。 所以, 渲染真的那么便宜吗? 输入值不保存在DOM中吗? 因此DOM和VirtualDOM之间没有区别,因此尽管渲染发生了什么变化? (可能是错误的假设)。 出于娱乐和学习目的,我尝试了以下方法: 使用自定义函数和变量来保存该值,而不是在每次击键时都设置上次输入后的状态,并传递与该值相关的组件等。 使用onBlur而不是onChange。 但是,我不喜欢他们中的任何一个,并且想问这个问题。 如果实时输入值更改对我们并不重要,那么我们只关心最后一个输入,仍然要走onChange吗? 回答1 React非常有效地处理了重新渲染,只重新渲染了更改。 有两种配置输入的方法 第一:受控输入 使用受控输入时,通常使用状态变量(甚至在某些情况下甚至是prop)来指定输入的值。 在这种情况下,您需要调用onChange函数来设置状态(或属性),因为该值已设置为状态/属性,因此您需要更改该值以更改该值,否则它将保持不变。 前任 <input value={this.state.textVal} onChange={(e) => this.setState({textVal: e.target.value}) />
  • 状态未立即更新时的 ReactJS 表单验证(ReactJS form validation when state is not immediately updated)
    问题 我正在尝试在我的注册表单上使用 ReactJS 创建客户端验证。 我使用 http://validatejs.org/ 库进行验证以及 https://github.com/jhudson8/react-semantic-ui 组件来渲染语义 ui React 组件。 这是代码。 var constraints = { email: { presence: true, email:true }, password: { presence: true, length: { minimum: 5 } } } var RegistrationForm = React.createClass({ getInitialState: function() { return { data: {}, errors: {} }; }, changeState: function () { this.setState({ data: { email: this.refs.email.getDOMNode().value, password: this.refs.password.getDOMNode().value, password_confirmation: this.refs.password_confirmation.getDOMNode().value } }); console
  • ReactJS:如何从另一个组件更新组件(ReactJS: How to update a component from another)
    问题 我正在尝试使用 ReactJS 编写一个简单的textarea字符计数器小部件来学习如何使用它,但我现在确定如何通过触发textarea onChange事件来设置值。 这是我编写应用程序的方式: /** * @jsx React.DOM */ var EditorWidget = React.createClass({ render : function() { return ( <div className="editor-widget"> <h4 className="title">Titolo articolo</h4> <TextArea maxLength={this.props.maxLength}/> <footer> <TextStatus maxLength={this.props.maxLength} currentLength={this.props.currentLength}/> <ActionButton /> </footer> </div> ); } }); var TextArea = React.createClass({ onTextChanged : function(event) { // how to update currentLength for TextStatus component? this.props
  • 如何使用ReactJS获取输入字段的值?(How to get the value of an input field using ReactJS?)
    问题 我有以下React组件: export default class MyComponent extends React.Component { onSubmit(e) { e.preventDefault(); var title = this.title; console.log(title); } render(){ return ( ... <form className="form-horizontal"> ... <input type="text" className="form-control" ref={(c) => this.title = c} name="title" /> ... </form> ... <button type="button" onClick={this.onSubmit} className="btn">Save</button> ... ); } }; 控制台给了我undefined -任何想法这段代码有什么问题吗? 回答1 您应该在类MyComponent下使用构造函数扩展React.Component constructor(props){ super(props); this.onSubmit = this.onSubmit.bind(this); } 然后您将获得标题的结果 回答2 这里有三个答案,这取决于您(被迫使用
  • 如何在reactjs中只允许文本框中的数字?(How to allow only numbers in textbox in reactjs?)
    问题 如何仅使用regular expression在reactjs只允许textbox数字? 回答1 基本思路是: 使用受控组件(使用输入字段的 value 和 onChange 属性),并在 onChange 句柄内部检查输入的值是否为正确的数字。 仅当输入的值是有效数字时才更新状态。 为此,请使用此正则表达式: /^[0-9\b]+$/; onChange 处理程序将是: onChange(e){ const re = /^[0-9\b]+$/; // if value is not blank, then test the regex if (e.target.value === '' || re.test(e.target.value)) { this.setState({value: e.target.value}) } } 工作示例: class App extends React.Component{ constructor(){ super(); this.state = {value: ''}; this.onChange = this.onChange.bind(this) } onChange(e){ const re = /^[0-9\b]+$/; if (e.target.value === '' || re.test(e.target.value))
  • 在ReactJS中,为什么setState在同步调用时表现不同?(In ReactJS, why does `setState` behave differently when called synchronously?)
    问题 我试图了解某些“魔术”行为的根本原因,但我无法完全解释,而从阅读ReactJS源代码中看不出来。 当响应输入上的onChange事件而同步调用setState方法时,一切都会按预期进行。 输入的“新”值已经存在,因此DOM实际上并未更新。 这是非常理想的,因为这意味着光标将不会跳到输入框的末尾。 但是,当运行具有完全相同的结构但异步调用setState的组件时,输入的“新”值似乎不存在,从而导致ReactJS实际上接触DOM,这将导致光标跳至DOM的末尾。输入。 显然,在异步情况下有某种干预将输入“重置”回其先前value ,而在同步情况下则没有。 这个机械师是什么? 同步示例 var synchronouslyUpdatingComponent = React.createFactory(React.createClass({ getInitialState: function () { return {value: "Hello"}; }, changeHandler: function (e) { this.setState({value: e.target.value}); }, render: function () { var valueToSet = this.state.value; console.log("Rendering..."); console
  • 我如何无法在ReactJS中更新状态变量?(How am I failing to update a state variable in ReactJS?)
    问题 我在ReactJS中设计了一个事件处理程序,以便当某人单击日历项的“完成”复选框时,日历项仍在系统中,但被标记为隐藏,以示不显示。 (制作日历的目的是允许一次性输入和重复输入,并允许重复输入使用“标记此实例完成”和“隐藏此系列”两个选项,但是这里我不关心这个细节。) 我的事件处理程序旨在在this.state复制数组,进行克隆, push()成为项,然后将突变的克隆保存为可能麻烦的解决方法,以push()直接push()项this.state下的数组。 。 根据包含的console.log()语句,看来我已经成功获取了该项目(一个整数,这里等于1 ),成功克隆了一个空数组并将push()放入克隆的数组中,并且然后无法修改为空的this.state.hidden_entries 。 我的代码显示为: hide_instance: function(eventObject) { console.log(eventObject); var id = parseInt(eventObject.target.id.split('.')[1]); console.log(id); // var id = eventObject.target.id; console.log(this.state.hidden_instances); console.log('Cloned: '); var
  • 我的测试应用程序上的 ReactJS 问题(ReactJS issue on my test app)
    问题 所以,我一直在研究我的第一个ReactJS应用程序。 只是一个简单的表单,您可以在其中输入电影名称,然后它会从IMDB获取数据并将它们作为模块添加到页面上。 这一切正常。 然而,每个电影模块也有一个删除按钮,该按钮应该删除该特定模块并触发重新渲染。 这不是很好,因为无论您单击哪个按钮,它总是删除添加的最后一个电影模块,而不是您单击的那个。 应用程序:http://lukeharrison.net/react/ Github 代码库:https://github.com/WebDevLuke/React-Movies 我只是想知道是否有人可以发现这背后的原因? 干杯! 回答1 我不确定为什么它没有正确渲染,因为数据集看起来不错。 查看代码,我会将您的删除功能更改为此... var index = this.state.movies.indexOf(movieToRemove); console.log(this.state.movies); if (index > -1) { this.state.movies.splice(index, 1); } console.log(this.state.movies); this.setState(this.state.movies); 我的假设是,状态没有正确更新。 每当更新状态时,您应该始终使用 setState
  • Reactjs 为什么 useEffect 有时会在每次安装/渲染时运行,而不是第一次运行(Reactjs why useEffect sometimes runs on every mount/render instead of just first)
    问题 我在 App.js 的路由中有一个 useEffect <Switch> <Route exact path={['/en', '/fr']} component={HomePage} /> <Route path={['/en/*', '/fr/*']}> <Route path="/:lang/*" component={DefaultLanguage} /> 在同一个文件(App.js)中,我们有这样的组件(使用 react-localize-redux): const DefaultLanguage = withLocalize( ({ activeLanguage, setActiveLanguage, ...props }) => { useEffect(() => { console.log('setting active language'); setActiveLanguage(props.match.params.lang); }, []); return <></>; } ); 问题是我点击的每个链接都运行 setActiveLanguage 即使我把[]让它只在第一次渲染时运行(因为这是我唯一一次关心从 URL 设置语言)我在应用程序的其他部分遇到了这个问题好。 根据我的理解, useEffect 不应在每次安装组件时运行,除非其依赖项发生变化
  • 使用 ReactJS 上传图片(Image upload with ReactJS)
    问题 我正在构建这个 ReactJS 应用程序,我想在其中单击按钮上传图像并将其带到下一个视图,即裁剪窗口,然后裁剪后,我可以将其上传到服务器。 我现在遇到的问题是如何将图像从一个视图拍摄到另一个视图而不将其上传到服务器? 我尝试采用图像路径,但不幸的是,当 UI 刷新时,路径将被刷新。 那么,在这种情况下我可以使用哪些选项。 谢谢! 回答1 昨天我处理了类似的案例。 我正在使用 react-dropzone 返回上传的文件,文件对象中的字段之一是“预览”,它包含当前上传文件的 uri(它可能以某种方式缓存,但我还没有调查它)。 在另一个视图中你只是在做 回答2 所以你想在视图之间保留你的图像信息。 “查看”是指不同的 HTML 页面吗? 我想更标准的做事方式是: 将文件内容/路径存储在某种状态(例如 redux 状态) 使用客户端路由器(例如 react-router)在保持状态的同时更改视图 如果您从未使用过客户端路由,它看起来像这样(使用 react-router): import { Router, Route, browserHistory } from 'react-router' // Iy you use redux to handle the state import { createStore } from 'redux' import myReducer
  • 为什么我不能在 ReactJS 中 flexbox 某些元素?(Why can I not flexbox certain elements in ReactJS?)
    问题 我开始尝试从react-router <Link>元素的样式。 <Link style={{display: 'flex'}}>...</Link> 但它似乎专门剥离了display CSS 属性。 有谁知道为什么以及如何解决它? 我遇到了同样的问题 <a style={{display: 'flex', marginTop: '10px'}}>Test link</a> (结果:只应用了margin-top: 10px ) 编辑:供将来参考,正如我所见,此页面仍有一些观点: 我真的尝试使用多个特定于供应商的display CSS 属性,而不仅仅是单个flex属性值,所以我现在意识到这个问题非常模糊...... 问题是 ReactJS 团队改变了他们解析内联样式中 CSS 属性的方式,我们“都”真正依赖于未记录的(内部)ReactJS 代码。 所以这曾经有效: <div style={{'display': ['flex', '-webkit-flex']}}> ... </div> 但这不再是了,因为他们更新了那部分代码。 有关更多详细信息,请参见例如 https://github.com/facebook/react/issues/2020 回答1 实际上这对我使用 React 15.2.0 有效:https://jsfiddle.net/s1mpLk26/ var
  • onChange 或 onBlur 来改变 ReactJs 中的状态?(onChange or onBlur to change the state in ReactJs?)
    问题 //假设在handleChange函数中改变state 。 如果onChange事件状态将更新每个字符更改。 <input type="text" name="name" onChange={this.handleChange} id="name" /> 如果onBlur事件状态将在离开输入字段后单次更新。 <input type="text" name="name" onBlur={this.handleChange} id="name" /> 哪种方法最适合更新React的state ,为什么? 回答1 这实际上是一个权衡决定。 我假设,在您的事件处理函数中,您正在调用React setState()来更新您的状态。 对 setState 的调用是异步的。 它创建了一个“待定状态转换”。 (有关更多详细信息,请参见此处)。 它真的很快,并且有一个 reducer 来只更新更改的节点。 所以你真的不需要考虑性能。 选择onChange() :如果您需要在输入更改后立即获得最新状态,例如: 每次输入后的搜索建议(如 Google 搜索框) 每次更改后验证输入 选择onBlur() :如果你只需要最后输入结束时的最新状态,例如: 每次更改都会触发 fetch 事件,检查输入的用户名或电子邮件是否存在 也想想这个场景: 最终用户填写了所有 3 个注册输入(姓名、密码和电子邮件)
  • ReactJS 中键的意义是什么?(What is the significance of keys in ReactJS?)
    问题 我想了解如果我不在动态添加的组件中使用键会发生什么。 我删除了密钥,它呈现没有任何问题,只是给出了有关密钥使用的警告消息。 有人可以举例说明如果我们不使用密钥会产生什么后果吗? 回答1 键帮助 React 识别哪些项目已更改、添加或删除。 应该为数组内的元素提供键,以赋予元素一个稳定的身份: 例子: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); TL;DR 在渲染动态子项时使用唯一键和常量键,否则会发生奇怪的事情。 在使用 React.js 的几周内,我发现的一个棘手方面是了解当组件是子项数组的一部分时您希望传递给组件的关键属性。 并不是您必须指定此属性,除了在控制台上收到此警告外,大多数情况下都可以正常工作: 数组中的每个孩子都应该有一个唯一的“键”道具。 检查未定义的渲染方法。 通过阅读链接的文档,很容易看不到这个肯定的含义: 当 React 协调有键的孩子时,它将确保任何有键的孩子都将被重新排序(而不是破坏)或销毁(而不是重用)。 起初在我看来,一切都与表现有关,但正如 Paul O'Shannessy 所指出的,它实际上与身份有关。 这里的关键是要了解并非 DOM
  • 如何在 reactjs 中使用 this.refs 从输入类型中获取值?(How to get values from input types using this.refs in reactjs?)
    问题 无法使用 this.refs 获取输入类型的值...如何从输入类型获取该值 export class BusinessDetailsForm extends Component { submitForm(data) { console.log(this.refs.googleInput.value) } } reder() { return( <form onSubmit={this.submitForm}> <Field type="text" name="location" component={GoogleAutoComplete} id="addressSearchBoxField" ref="googleInput" /> </form> ) } } 回答1 你应该避免ref="googleInput"因为它现在被认为是遗留的。 你应该改为声明 ref={(googleInput) => { this.googleInput = googleInput }} 在处理程序内部,您可以使用this.googleInput来引用元素。 然后在您的submitForm函数内部,您可以使用this.googleInput._getText()获取文本值 字符串引用是遗留的https://facebook.github.io/react/docs/refs-and-the
  • ReactJS:根据状态淡入 div 和淡出 div(ReactJS: Fade in div and fade out div based on state)
    问题 因此,我试图根据用户单击的按钮淡入和淡出一组输入。 我尝试使用 jQuery,但是,div 以相同的速度淡入和淡出...... 我正在使用 es6 类并做出反应。 我想要的是用户按下按钮并输入淡入淡出。 另一个按钮,输入fadeOut 。 我不介意使用 jQuery,但我想了解如何使用 react 来做到这一点。 renderInputs() { if (this.state.addType === "image") { return ( <div className="addContainer"> <input type="text" className="form-control" /> </div> ) } else { return ( other inputs ) } } render() { return ( <CSSTransitionGroup transitionName="fadeInput" transitionEnterTimeout={500} transitionLeaveTimeout={300}> {this.renderInputs()} // this doesn't work but I want this content to be conditional. </CSSTransitionGroup> ) } // SCSS
  • Angular 5 仅对模糊进行验证?(Angular 5 solely validation on blur?)
    问题 我想知道是否可以在模糊上以反应形式进行验证。 目前您可以设置updateOn: "blur"但输入字段的值不会在输入时更新。 在我的情况下,我需要在每次击键时更新值,因为我用它进行计算并将结果显示给用户。 验证应该只发生在模糊上。 谢谢。 编辑: 我使用 FormBuilder,一些内置验证器和一些自定义验证器。 示例代码: let formToMake = { purpose: [null, Validators.required], registrationDate: this.fb.group({ day: [null, Validators.required], month: [null, Validators.required], year: [null, Validators.required] }), isTruth: [null, Validators.compose([checkIfTrue, Validators.required])] }; 如果我要使用模糊事件,我需要手动进行所有验证,我认为这不是一个好方法。 回答1 我最终做了什么: 使用反应形式: TS 这是要制作的表格。 我需要在模糊时验证 productCost 和 LoanAmount,但值本身需要更新 onchange。 如果您设置updateOn: "blur"验证发生在模糊事件之后
  • 使用or similar tags in ReactJS using JSX使用or similar tags in ReactJS using JSX(Use <code> or similar tags in ReactJS using JSX)
    问题 我正在尝试使用带有 JSX 的 ReactJS 来创建样式指南的概念证明。 我希望能够显示如何调用组件的原始 html。 JSX 忽略了我的<code>标签并渲染了组件 这是我迄今为止尝试过的在 HTML 中显示 HTML 代码 <blockquote> <pre> <code> <VideoPlayer ref="videoplayer" preload={this.props.preload} classes={this.props.classes} videoID={this.props.videoID} controls="controls" /> </code> </pre> </blockquote> 我很惊讶地看到它渲染。 回答1 如果您希望该代码作为文字块,则需要使用 JSX 安全字符,因此要么 JSX 转义所有内容,要么尽可能使用 HTML 实体,然后您仍然需要 JSX 转义大括号(因为那些是JSX 中的模板语法)和换行符(是的,这些换行符也不是 JSX 安全的。空白在 JSX 转换过程中被折叠)。 并且您可能想要使用<pre> ,它是格式化文本的块级元素,而不是内联的<code> : <pre> <VideoPlayer{'\n'} ref="videoplayer"{'\n'} preload={'{'}this.props.preload{'}\n'}
  • 如何使用vba在Excel中的ENTER键上调用函数(How to call a function on ENTER key in Excel using vba)
    问题 谷歌应该为我提供充足的例子,但它们似乎都不起作用 我想要的是:每次用户按下,然后释放,ENTER 键,让我的程序做一些事情(即创建一个 MsgBox,或调用函数 Foo)。 我更喜欢 MWE 的形式 我做了什么:我试过用谷歌搜索它,但没有一个例子是实用的。 他们编译,但不做任何事情。 我还确保以宏兼容的 Excel 格式保存。 我在用什么:我在 Office 365 中使用 Excel 2016,64 位 编辑:用户将此信息输入到工作表中。 我想拦截用户输入,每次他们按 ENTER 时,将光标/活动单元格向下两行,因此每个单元格下方都有一个空单元格。 如果用户按下 Tab,我想将光标/活动单元格移到两列右侧,因此每个单元格的右侧都有一个空单元格。 编辑 2:这是我现在所拥有的 MWE,它应该可以工作,但什么也不做。 我将此添加到工作表中,而不是作为模块 Sub SomeActions() MsgBox ("Hello") End Sub Private Sub Workbook_Open() Application.OnKey "~", "SomeActions" End Sub 回答1 首先,创建一个回调Sub来执行您需要的逻辑。 将其放入一个新的代码模块中(而不是放入工作表代码中): Sub SomeActions() ... End Sub 然后,订阅OnKey事件