如何使用Virtual DOM在React / Javascript中重新加载输入值?
发布时间:2020-12-14 16:44:55 所属栏目:资源 来源:网络整理
导读:我有重载输入值的问题. input type="email" ref="email" id="email" value={this.props.handlingAgent.email}/ 之后,我使用 this.props.handlingAgent.email = "asd" 在调试器中,this.props.handlingAgent.email的值实际上是asd,但在输入中仍然是旧值.如何在
我有重载输入值的问题.
<input type="email" ref="email" id="email" value={this.props.handlingAgent.email}/> 之后,我使用 this.props.handlingAgent.email = "asd" 在调试器中,this.props.handlingAgent.email的值实际上是asd,但在输入中仍然是旧值.如何在没有JQuery的情况下刷新该值?它不应该自动刷新吗? 解决方法
首先,道具是传递给你的东西.将它们视为功能参数.孩子真的不应该修改它们,因为它破坏了父母的假设并使你的UI不一致.
在这里,由于道具已传递给您,您希望从父级获得一个处理程序,您可以调用该处理程序来通知您的更改: var App = React.createClass({ getInitialState: function() { return {inputValue: ''}; },handleChange: function(value) { console.log('Value gotten back from the child: ' + value); this.setState({ inputValue: value }); },render: function() { return <Field onChange={this.handleChange} inputValue={this.state.inputValue} />; } }); var Field = React.createClass({ handleChange: function(event) { // Make sure the parent passes the onChange to you as a prop // See what I did here? It's not the actual DOM onChange. We're manually // triggering it based on the real onChange fired by the `input` this.props.onChange(event.target.value); },render: function() { // I named the value prop `inputValue` to avoid confusion. But as you can // see from `onChange`,it'd be nicer to name it just `value` return <input value={this.props.inputValue} onChange={this.handleChange} />; } }); 所以,是的,如果您告诉父母改变,它会“自动”刷新.不是修改传递给你的内容,而是通过向父类传递新值来使用vanilla回调.然后它向下冲洗相同的值(或不同,如果适合). (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |