React Select 不会在单击选项时更新值答案

【问题标题】：React Select doesn't update value on clicking optionReact Select 不会在单击选项时更新值
【发布时间】：2017-10-13 15:56:11
【问题描述】：

我有一个 React Select 表单，在 API 调用后加载了选项。工坊的初始状态值被设置，在表单中点击一个选项后更新。但是，Select 的视图不会更新。更重要的是，当提交表单时，工作坊成功保存到数据库中。我该怎么办？

renderForm() {
    return (
        <section className="col-md-12 col-sm-12">
            <form className="col-md-12 col-sm-12"
                  onSubmit={ this.handleSubmit }> 
                // other form-groups
                <div className="form-group">
                    <label>
                        Region:
                        <input className="form-control"
                               type="text"
                               value={ this.state.value }
                               onChange={ this.handleRegionChange } required />
                    </label>
                </div>
                <div className="form-group">
                    <label>
                        Workshop:
                    </label>
                    <Select name="form-field-workshop"
                            value={ this.state.workshop }
                            onChange={ this.handleWorkshopChange }
                            options={ this.renderFormWorkshops() }
                            clearable={ false }
                            searchable={ false }
                            required />
                </div>
                <input className="btn btn-default"
                       type="submit"
                       value="Submit" />
            </form>
        </section>
    );
}

// handles the change of state when an option is selected
handleWorkshopChange(value) {
    this.setState({
        workshop: value.label
    });
}

// displays the options in the Select form
renderFormWorkshops() {
    return _.map(this.props.workshops.workshops, (it) => {
        return (
            { value: it.id, label: it.name }
        );  
    });
}

【问题讨论】：

从value={ this.state.workshop) }这一行删除括号。应该是value={ this.state.workshop }

标签： javascript reactjs lodash react-select

【解决方案1】：

handleWorkshopChange(value) {
    this.setState({
        workshop: value.value
    });
}

【讨论】：

它会更新视图，但会保存 id。进入数据库。我会从那里处理。非常感谢:)
不应该是workshop: value.target.value吗？

【解决方案2】：

您的构造函数中是否正确设置了它？这里可能发生了一些上下文问题，这是绑定上下文的正确形式：

constructor(props) {
   super(props);

   this.handleWorkshopChange = this.handleWorkshopChange.bind(this);
}

如果您不使用箭头函数，则需要为依赖使用this 方法的情况绑定上下文。

另外，这里有一个杂散的括号：value={ this.state.workshop) }

【讨论】：

是的，绑定已经完成。不要介意杂散的括号，我在发布问题时没有看到它。