我在控制 React 完成的重新渲染量时遇到了一些麻烦。 假设我在这里得到了这个用户输入:
handleFirstNameChange: function(e) {
this.setState({ firstName: e.target.value, userTyping: true });
},
render: function(){
<RB.Input value={this.state.firstName} onChange={this.handleFirstNameChange} name=""
type="text" label="First name" placeholder="First name.."/>
}
这个自定义下拉组件:
<SearchDropdown title="Role" options={this.props.currentUser.roles}
selectedOptions={this.props.currentUser.selectedRoles} />
每次用户输入一个字母时，下拉菜单都会重新呈现每个选项，即使(看起来)这些组件彼此没有任何共同点。 我一直在尝试通过包含一个“userIsTyping” bool 值作为下拉组件的 Prop 并在 ComponentShouldUpdate 中检查它来管理它，但现在我已经有了嵌套组件，它变得越来越成问题。 我仍处于使用 React 的早期阶段，所以我很确定这里有一些明显的东西是我遗漏的。
最佳答案
在 React 中，onChange 会在每次按下键时触发。在您的代码中，这将导致通过 handleFirstNameChange 处理程序调用 setState，这将导致重新呈现。
两种选择:
- 别担心。重新渲染不一定会给您带来任何问题，如果没有性能问题，那么您可以忽略它。如果我处在你的位置，你的组件相当简单，我可能会忘记它 :)
- 不要使用
onChange，使用onBlur，然后您的处理程序将仅在字段失去焦点时触发。
您可以在文档中阅读有关 React 中 onChange 行为的更多信息:
https://facebook.github.io/react/docs/forms.html#interactive-props
关于javascript - 自定义 react 下拉组件在每个用户输入上重新呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30849711/