Question

使用React，从第一个onChange渲染并填充新选择。

在onChange上，我已经从第一个选择下拉列表中成功获取了数据。现在，如何在同一页面上呈现更新后的状态。

constructor(props){
super(props);
this.state = {
partitions: [] 
}

handleSubmit(event) {
    const pk = event.target.value;
    fetch(`api/locations/${pk}`)
        .then(response => response.json())
        .then(body => this.setState({partitions: body}))
}
render() {
    return (
        <div>
            <div className={"form-group"}>
                <label>Locations</label>
                <select className={"form-control"}
                        name={"location"} value={"location"}
                        onChange={this.handleSubmit}>
                    <option value={""} key={""}>---------</option>
                    {Object.entries(this.props.data)
                       .map(location=>
                        <option value={location[1].id} 
                             key={key(location)}>
                            {location[1].location}
                        </option>
                    )}
                </select>
            </div>

如何获取要在第一个选择下拉菜单下呈现的数据？

Answer 1

您需要做的就是创建另一个选择并包装围绕检查长度超过0的条件。

const { partitions } = this.state;
const displayPartitions = partitions.length > 0;

<>
  // Previous <select/>

  {displayPartitions && (
    <select>
      {partitions.map(item => (
        ...
      ))}
    </select>
  )}
</>

我个人会有一个处理选择的组件，您可以在页面上使用它两次，并用this.props.data填充一次，然后用this.state.partitions填充一次。

如果我在做出选择时正确阅读了您的回复，则说明您已经有了数据，因此只需要编写另一个选择元素即可。

使用React从先前选择返回的数据中填充新的选择选项

1 个答案: