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提供DOM元素上的value prop您是否可以使用它来更新您的州。您的第三方<Select>组件可能具有不同的事件签名或期望。

此外，由于我不知道您正在使用哪个库，我已经提供了跟踪您的价值的状态键作为＆＃34; yourSelectKey＆＃34;，但您可以替换它用正确的钥匙。如果它是嵌套属性（对象的一部分），则可能必须添加扩展运算符，以便其他值也被复制。

您需要将onChange事件处理程序添加到您的select组件。我建议您按照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>

您面临的其他问题：

您需要将handleChange绑定到对象实例。您可以在构造函数中使用行this.handleChange = this.handleChange.bind(this)执行此操作，也可以将handleChange声明为实例变量，如上所述。
正如评论者所说，你应该避免在componentWillMount中进行fetch调用，但是应该使用componentDidMount。这对初学者来说是一个常见的错误。

React-select组件值不更新。

1 个答案: