javascript - React 在点击另一个 React 组件后渲染一个组件

Question

非常新的 react 。我正在创建一个包含一系列下拉菜单的页面，其想法是当您在一个下拉菜单上选择一个选项时，会在其正下方附加一个相同的下拉菜单。

所有的 div 和 selects/options 都是 React 组件，我试图给其中一个初始状态“firstTime == true”，然后当你单击一个选项时(如果它是 true)，它会呈现另一个 <Dropdown /> event.target.parentElement 下面的元素。

var Dropdown = React.createClass({
  getInitialState: function () {
    return{firstTime: true};
  },
  change: function(event){
    var x = event.target;
    this.state.firstTime==true ? ReactDOM.render(<Dropdown options={OptionChoices} dropdownClass="Poop" />, wrapper) : console.log("oh well");
    this.setState({firstTime: false});
  },
  render: function() {
    return (
      <select onChange={this.change} className={this.props.dropdownClass}>
        {this.props.options.map(function(option){
          return (
              <Option value={option.value} key={option.value}>{option.label}</Option>
            );
        })}
    </select>
    );
  }
});

不幸的是，它不断出现“目标容器不是 DOM 元素”。这是有道理的，因为我试图将其放入 react 生成的元素中，但对我想做的事情并没有太大帮助。

感谢任何和所有的帮助，如果这是一个非常基本的问题，我们很抱歉。

fiddle :https://jsfiddle.net/y4wfLy1z/

Answer 1

我建议始终渲染两个选择选项(第一个和渲染中的选项)并在第一次调用时隐藏第二个选项。

因此，在第一次调用的更改事件中，您可以更改隐藏第二个元素的可见性(this.state.dropdownClass)的状态变量。更改时，将 className 设置为所需的类属性 (this.props.dropdownClass)。

在 ES6 中，这将如下所示:

export default class Dropdown extends React.Component {
    constructor() {
        super();
        this.firstTime = true;
        this.first_options = [{value: 'first1', label: 'First Option 1'}, {value: 'first2', label: 'First Option 2'}];
        this.state = {dropdownClass: 'hide'};
    }

    change(event) {
        console.log('change');
        this.setState({dorpdownClass: this.props.dropdownClass});
    }

    render() {
        return (
           <div>
               <select onChange={this.change.bind(this)} className='Poop'>
                    {this.first_options.map(function (option) {
                        return (
                            <option value={option.value} key={option.value}>{option.label}</option>
                        );
                    })}
                </select>
                <select onChange={this.change.bind(this)} className={this.props.dropdownClass}>
                    {this.props.options.map(function (option) {
                        return (
                            <option value={option.value} key={option.value}>{option.label}</option>
                        );
                    })}
                 </select>
           </div>
       );
    }
}