如何将级联下拉列表的选定值绑定到 Ant Design 中的 h1 标签？

Question

我正在使用 Ant Design 创建一个级联下拉列表。我希望将所选值作为标签返回，以显示“您选择了 {name}”之类的内容。如何将所选值绑定到 h1 标签？这是到目前为止的代码：

    const options = [
      {
        value: 'Person',
        label: 'person',
        children: [
          {
            value: 'amy',
            label: 'Amy',
          },
          {
           value: 'john',
           label: 'John'
          }
        ],
      }
    ];
    
    function onChange(value, selectedOptions) {
      console.log(value, selectedOptions);
    }
    
    function filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    }  
    
    class CascadingDropdown extends Component{
      render(){
            return(
                <div>
                    <p>Please select a person:</p>
                  <div>
                  <Cascader
                      options={options}
                      onChange={onChange}
                      placeholder="Please select"
                      showSearch={{ filter }}
                      onSearch={value => console.log(value)}
                    />
                  </div>
                  <h1>You selected {name}</h1> // here is where I want to print the name
                </div>
            );
        }
    }
    
    export default CascadingDropdown;

Answer 1

使用可以使用状态来显示所选值，如以下代码

const options = [
  {
    value: 'Person',
    label: 'person',
    children: [
      {
        value: 'amy',
        label: 'Amy',
      },
      {
        value: 'john',
        label: 'John',
      },
    ],
  },
];

class CascadingDropdown extends Component {
  onChange(value, selectedOptions) {
    console.log(value, selectedOptions);
    if (value != undefined) {
      this.setState({ name: value[1].toString() });
    }
  }

  filter(inputValue, path) {
    return path.some(
      (option) =>
        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
    );
  }

  constructor(props) {
    super(props);
    this.state = {
      name: '',
    };
  }
  render() {
    return (
      <div>
        <p>Please select a person:</p>
        <div>
          <Cascader
            options={options}
            onChange={this.onChange.bind(this)}
            placeholder="Please select"
            showSearch={this.filter}
            onSearch={(value) => console.log(value)}
          />
        </div>
        <h1>You selected {this.state.name}</h1> 
      </div>
    );
  }
}

截图所示：