Question

我正在尝试在页脚中打印选择元素的状态。但是问题在于它不会打印任何内容，因为默认值为null。而且我不知道如何在内部选择状态下更改选择时打印页脚。

    class SingleColor extends React.Component {
      state = {
        selectedOption: null,
      };
      handleChange = selectedOption => {
        this.setState({ selectedOption });
      };
      render() {
        const { selectedOption } = this.state;
        return (
          <React.Fragment>
            <h1 className="TITLE">Please choose your favourite colour</h1>
            <Select 
              className="SINGLESELECT"
              classNamePrefix="SINGLESELECT__options"
              value={selectedOption}
              onChange={this.handleChange}
              options={options} 
              styles={customStyles}
            />
            <Footer singlevalue={this.state.selectedOption} />
          </React.Fragment>
        );
      }
    }

    export default class Footer extends Component {
      render() {
        return (
          <div className="bla">
            <h1> {this.props.singlevalue}</h1>
          </div>
        )
      }
    }

Answer 1

假设您正在使用react-select。

更改值时，react-select为您提供对象，就像您向options提供了对象数组一样。

您应该在Footer组件中将值打印为

<h1> {this.props.singlevalue && this.props.singlevalue.label}</h1>

Demo

Answer 2

这是因为onChange事件不是直接发送值，而是发送一个事件。

handleChange = event => { 
  const { value } = event.target
  this.setState({ selectedOption: value })
}

如何在另一个组件中打印反应选择状态？

2 个答案: