Question

我们正在使用react-select的多重选择控件。当我们从选择框中选择一个值时，它会显示在选择框内。我们可以在选择框下方的另一个控件中显示所选值吗？

render() {
  console.log("this.state", this.state);
  return (
    <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 select-box">
      <div className="col-lg-8 col-md-8 col-sm-8 col-xs-8 ">
        <Select
          multi={true}
          onChange={this.handleChange}
          options={this.state.labelData}
          onInputKeyDown={this.handleChange}
        />
      </div>
    </div>
  );
}

Answer 1

如果您的组件具有州，则可以将该值保存在您所在的州并以任何方式显示：

class App extends Component {
  constructor(props){
    super(props)
    this.state = { value: null }
    this.handleSelect = this.handleSelect.bind(this)
  }
  handleSelect(evt) {
    this.setState({value: evt.currentTarget.value});
  }
  render() {
    return (
     <div>
       <select onChange={this.handleSelect}>
         <option>...</option>
         <option>...</option>
         <option>...</option>
        </select>
     {this.state.value && `The selected value is ${this.state.value}`}
     </div>)
  }
}

如何在选择控件下方渲染所选值？

1 个答案: