2

我在组件中使用反应下拉树选择。

class PriceComponent extends Component {
    constructor(props) {
        this.state = {
          index: 0,
          rate: [{
             price: 0,
             regions: []
          }]
        }
    }

    //add more event
    addMore = () => {
       this.setState({ rate: this.state.rate.concat([{ price: 0, regions: [] }]) })
    }

    //dropdown tree select
    onChange = (currentNode, selectedNodes) => {
       const arr_values = selectedNodes.map(v => v.value);
    }

   //price change
   handleChange = (e) => {
       this.setState({
         [e.target.name]: e.target.value
       })
   }

    render() {
        //many fields
        {this.state.rate.map((r, idx) => (
            <div key={idx}>
               <input type="text" name="price" onChange={(e) => this.handleChange(e, i)} />
               <DropdownTreeSelect data={regions} onChange={this.onChange} />
            </div>
        )}
        <button onClick={this.addMore.bind(this)}>Add More</button>
    }
}

以上是我的代码，但我遇到了一些问题，我不知道如何继续。

  1. 在下拉组件的 onChange 中，如果我执行 setState，它会不断重新渲染，所以我尝试了“防止在父级上重新渲染”，但我收到错误消息，指出数据未定义（我已将 componentWillReceiveProps 替换为 getDerivedStateFromProps）
  2. 添加一组新字段（价格 + 区域）时，先前区域下拉列表中的值会刷新。这可以防止吗？
  3. 有没有办法获取下拉列表的索引？我尝试使用 onChange 传递索引，但没有成功。

任何帮助表示赞赏。提前致谢。

4

1 回答 1

0

在您的地区变量需要是一个状态变量。在导致重新渲染的任何状态更改上，区域需要反映您在 DropdownTreeSelect 下拉列表中选择/未选择的内容。

我通过调整 onChange 方法来修改区域状态变量解决了我的问题，因此当 DropdownTreeSelect 重新渲染时，您的区域需要选中或取消选中其子项。

于 2021-07-13T01:50:03.657 回答