Question

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

所有的div和选择/选项都是React组件，我试图给其中一个初始状态“firstTime == true”然后当你点击一个选项时（如果它是真的），它会渲染另一个{ event.target.parentElement下面的{1}}元素。

<Dropdown />

不幸的是，它不断提出“目标容器不是DOM元素”。这是有道理的，因为我试图把它放在一个反应生成的元素中，但对我正在尝试做的事情没有太大的帮助。

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

小提琴：https://jsfiddle.net/y4wfLy1z/

Answer 1

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

因此，在第一次调用的change事件中，您更改隐藏第二个元素的visibility（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>
       );
    }
}

React在另一个反应组件之后单击时呈现组件

1 个答案: