reactjs - React-select 组件值未更新。

Question

只是想知道我在这里做错了什么。当我从列表中选择一个值时，组件输入字段不会填充该值。

class Search extends Component {
constructor(props) {
    super(props);
    this.state = {
        name: 'order_select_field',
        placeholder: "Make a selection",
    }
}

componentWillMount () {
    fetch('http://apirequest.com')
        .then( function(response) {
            return response.json();
        })
        .then(function(json) {
            this.setState({options: json});
        }.bind(this))
    }

handleChange(event) {
    this.setState({ })
}

render() {
    return (
        <div>
            <Select
                name={this.state.name}
                options={this.state.options}
                placeholder={this.state.placeholder}
            />
        </div>
    )
}

}

Answer 1

您的主要问题是您的handleChange方法没有设置值

handleChange = (event) => {
  this.setState({
    ...this.state,
    value: event.target.value
  })
}

Vanilla <select>组件，onChange 事件将在 event.target 处有一个 DOMElement 引用，并且 React 提供 value DOM 元素上的 prop 你可以用它来更新你的状态。您是第 3 方 <Select>组件可能有不同的事件签名或期望。

此外，由于我不知道您正在使用哪个库，因此我提供了跟踪您的值的状态键“yourSelectKey”，但您可以将其替换为正确的键。如果它是嵌套属性(对象的一部分)，您可能必须添加扩展运算符，以便其他值也被复制。

并且您需要将 onChange 事件处理程序添加到您的选择组件中。我建议您关注react docs而不是使用该库。

<select
  value={this.state.value}
  onChange={this.handleChange}>
  name={this.state.name}>

    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>

</select>

您面临的其他问题:

• 您需要绑定(bind)handleChange到你的对象实例。您可以在构造函数中使用 this.handleChange = this.handleChange.bind(this) 行来执行此操作或通过声明 handleChange作为实例变量，正如我上面所做的那样。
• 正如评论者所说，您应该避免在 componentWillMount 中进行 fetch 调用，而应该使用 componentDidMount。这是初学者常犯的错误。