javascript - 如何在反应中处理多个反应选择块
问题描述
每当两个字段都有一个值时,我正在编写一个带有两个 react-select 字段的反应组件,我需要将组合对象作为回调传递给父级。我知道的一种方法是将两个选项都存储在 onchange 中,然后将它们组合起来发送。但是,由于需要有性能指标,我试图使用状态更改来最小化重新渲染。
这是我现在拥有的伪代码。两者中的 onchange 方法都设置了一个状态,但我不希望重新渲染发生。
fieldSelectorChange = option => {
this.setState(
{
option,
},
);
};
<Select
options={ fields }
value={ sortedField }
searchable
placeholder={ trans( 'Find an option' ) }
onChange={ this.fieldSelectorChange }
autoFocus
/>
<Select
options={ sortOptions }
value={ sortedOrder }
defaultValue={ sortOptions[ 0 ] }
placeholder={ trans( 'Choose' ) }
onChange={ this.fieldSelectorChange }
/>
解决方案
无按钮
onSelect1Change(e) {
this.setState({ select1value: e.target.value });
if (this.state.select2value) {
this.props.parentCallback({
value1: e.target.value,
value2: this.state.select2value
})
}
}
onSelect2Change(e) {
this.setState({ select2value: e.target.value });
if (this.state.select2value) {
this.props.parentCallback({
value1: this.state.select1value,
value2: e.target.value,
})
}
}
/* ... */
<Select value={this.state.select1value} onChange={onSelect1Change} /* ... */ />
<Select value={this.state.select2value} onChange={onSelect2Change} /* ... */ />
没有按钮,只有一个 onChange
正如您所问的onSelectChange
那样,但在这种情况下,您在每次渲染时都重新创建箭头函数,并且没有得到很好的优化。
onSelectChange(field, value) {
this.setState({ [field]: value });
if (this.state.select1value && this.state.select2value) {
this.props.parentCallback({
value1: value,
value2: this.state.select2value
})
}
}
/* ... */
<Select
value={this.state.select1value}
onChange={e => this.onSelectChange('select1value', e.target.value)}
/* ... */
/>
<Select
value={this.state.select1value}
onChange={e => this.onSelectChange('select2value', e.target.value)}
/* ... */
/>
如果你想避免这种情况,你必须再创建两个函数并在你的组件中使用它们
onSelect1Change = e => this.onSelectChange('select1value', e.target.value)
onSelect2Change = e => this.onSelectChange('select2value', e.target.value)
您还可以根据需要在此处添加一些验证:
if (field in this.state) {
this.setState({ [field]: value });
} else {
// field is missing, do something with this case
}
表格和提交
将输入字段包装在表单组件中是一种常见的做法。
onSelect1Change(e) {
this.setState({ select1value: e.target.value });
}
onSelect2Change(e) {
this.setState({ select2value: e.target.value });
}
onSumbit(e) {
e.preventDefault();
/* get both values from state and do something */
console.log(this.state.select1value, this.state.select2value);
}
/* ... */
<form onSubmit={onSubmit}>
<Select value={this.state.select1value} onChange={onSelect1Change} /* ... */ />
<Select value={this.state.select2value} onChange={onSelect2Change} /* ... */ />
<input type="submit" value="Submit" />
</form>
按钮
但是你也可以在没有形式的情况下做到这一点。您可以制作一个按钮并在用户单击时从状态中获取值。
onSelect1Change(e) {
this.setState({ select1value: e.target.value });
}
onSelect2Change(e) {
this.setState({ select2value: e.target.value });
}
onClick(e) {
e.preventDefault();
/* get both values from state and do something */
console.log(this.state.select1value, this.state.select2value);
}
/* ... */
<div>
<Select value={this.state.select1value} onChange={onSelect1Change} /* ... */ />
<Select value={this.state.select2value} onChange={onSelect2Change} /* ... */ />
<button onClick={onClick}>Click me!</button>
</div>
推荐阅读
- c++ - Gstreamer 录制带音频的视频
- javascript - 通过 HTML 表单过滤烧瓶参数
- python - 如何处理 Beautifulsoup 递归错误(或解析错误)
- laravel - Laravel Buglinjo/WebP 不保存图像
- python - 关键错误python3.7
- c++ - 从一个类初始化一个指针,从一个不同的类类型,C++
- javascript - 我们如何防止用户使用 JavaScript 在 LiveCycle xfa 表单中使用 Adobe 菜单中的打印按钮?
- c# - 无法并行 MSBUILD 多个“目标”参数
- node.js - Node.js 显示 [object Object] 而不是 result.row
- html - 使用默认值在 ag 网格上添加行