从EditPlayerModal.js
容器中打开了一个player.js
模态。从player.js
准备了一个 initialValues ,并将其传递给EditPlayer.js
。
initialValues = {name: 'abc', country: 'France',......}
看起来像这样。国家是一个反应性的最终形式下拉组件。
EditPlayerModal.js
render () {
.....
.....
const changePlayerCountry = ([name], state, methods) => {
methods.changeValue(state, name, () => this.state.selectedPlayer);
};
<Form
initialValues={this.props.initialValues}
mutators={{ ...arrayMutators, changePlayerCountry }}
onSubmit={onSubmit}
validate={validate}
render={({
pristine,
values,
handleSubmit,
form,
}) => (
<form onSubmit={handleSubmit}>
........
........
........
........
<PlayerDetailModal
show={this.state.show}
closeModal={this.state.closeModal}
countryDropdownChangeHandler={(e) => {
this.setState({
selectedPlayer: e
}, () => {
form.mutators.changePlayerCountry('country')
})
}}
/>
PlayerDetailModal
countryDropdownChangeHandler = (e) => {
this.props.countryDropdownChangeHandler(e)
}
将更改 PlayerDetailModal.js 国家/地区,并调用countryDropdownChangeHandler
道具。
问题
我尝试的另一种方法是将国家一直传递到父index.js
,并更改 initialValues 国家对象。然后使用 shouldComponentUpdate 并检查 EditPlayerModal.js 中的prev和下一个initialValue并重新渲染组件。这种方法也不起作用。
在这里反应和反应最终形式的新手!
谢谢