时间戳

首页 > 解决方案 > 使用 React 从先前选择返回的数据中填充新的选择选项

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

问题描述

使用 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>

如何让该数据呈现在第一个选择下拉列表下方？

标签： reactjs

解决方案

您需要做的就是创建另一个选择并将它包裹在一个检查长度大于0.

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

<>
  // Previous <select/>

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

就我个人而言，我会有一个处理选择的组件，你可以在一个页面上使用它两次，this.props.data然后用this.state.partitions.

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

推荐阅读