Javascript React |可重用下拉组件|如何选择选项？

对react来说是相当新的。我正在为盖茨比项目创建一个下拉按钮。按钮切换可以工作，但我无法将所选值发送到需要它的父级

-尝试提升状态，但这导致按钮根本不出现。我在这里有点困惑，所以可能我做错了什么

-还尝试使用refs，虽然我不确定这是否是正确的用例，但它起作用了，但是在子组件中更新之前，它的值似乎被捕获了，我不确定如何更改或解决这个问题。（当前已为此设置代码）

这两个选项中有一个是正确的吗？或者谁能给我指引正确的方向，谢谢

父项中的下拉列表：

this.dropdownRef1 = React.createRef();

DropdownBtn:

export default class refineBtn extends React.Component {
    constructor(props) {
        super(props);
    }
      state = {
        open: false,
        [this.props.mainText + "Option"]: "all", 
    };

    dropdownBtnToggle = () => {
        this.setState((prevState)=> {
            return{open: !prevState.open};
        });
    };

    optionClickHandler = (option) => {
        this.setState(() => {
            console.log(this.props.mainText + " updated to " + option)
            return {[this.props.mainText + "Option"] : option}
        });
       };

    render(){ 
    const options = this.props.options
    console.log("open: " + this.state.open)

return(
    <div>
        <button onClick={this.dropdownBtnToggle} >
            {this.props.mainText}:               
        </button>
        <div className={this.state.open ? 'option open' : "option"} >
            <p key={"all"} onClick={() => this.optionClickHandler("all")}> all</p>
           {options.map(option => (
               <p key={option} onClick={() => this.optionClickHandler(option)}>{option}</p>
            ))}
        </div>       
    </div>
    );
}
}

导出默认类refineBtn扩展React.Component{
建造师（道具）{
超级（道具）；
}
状态={
开：错，
[this.props.mainText+“选项”]：“全部”，
};
dropdownBtnToggle=（）=>{
this.setState（（prevState）=>{
返回{open:！prevState.open}；
});
};
optionClickHandler=（选项）=>{
此.setState（（）=>{
console.log（this.props.mainText+“更新为”+选项）
返回{[this.props.mainText+“Option”]：Option}
});
};
render（）{
const options=this.props.options
log（“打开：“+this.state.open”）
返回(
{this.props.mainText}：
this.optionClickHandler（“all”）}>all
{options.map（option=>(
this.optionClickHandler（option）}>{option}
))}
);
}
}

您可以通过允许组件接受回调来响应选择

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {open: false, value: ''}
  }

  render() {
    return (
      <div>
        <div onClick={() => this.setState({open: true})}>{this.state.value}</div>
        <div style={{display: this.state.open ? 'block' : 'none'}}>
          {this.props.options.map((option) => {
            const handleClick = () => {
              this.setState({open: false, value: option})
              this.props.onChange(option)
            }
            return (
              <div key={option} onClick={handleClick} className={this.state.value === option ? 'active' : undefined}>{option}</div>
            )
          })}
        </div>
      </div>
    )
  }
}




<MyComponent onChange={console.log} options={...}/>

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具） this.state={open:false，值：“” } render（）{ 返回( this.setState（{open:true}}>{this.state.value} {this.props.options.map（（option）=>{ 常量handleClick=（）=>{ this.setState（{open:false，value:option}） this.props.onChange（选项） } 返回( {option} ) })} ) } }

export default class refineBtn extends React.Component {
    constructor(props) {
        super(props);
    }
      state = {
        open: false,
        [this.props.mainText + "Option"]: "all", 
    };

    dropdownBtnToggle = () => {
        this.setState((prevState)=> {
            return{open: !prevState.open};
        });
    };

    optionClickHandler = (option) => {
        this.setState(() => {
            console.log(this.props.mainText + " updated to " + option)
            return {[this.props.mainText + "Option"] : option}
        });
       };

    render(){ 
    const options = this.props.options
    console.log("open: " + this.state.open)

return(
    <div>
        <button onClick={this.dropdownBtnToggle} >
            {this.props.mainText}:               
        </button>
        <div className={this.state.open ? 'option open' : "option"} >
            <p key={"all"} onClick={() => this.optionClickHandler("all")}> all</p>
           {options.map(option => (
               <p key={option} onClick={() => this.optionClickHandler(option)}>{option}</p>
            ))}
        </div>       
    </div>
    );
}
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {open: false, value: ''}
  }

  render() {
    return (
      <div>
        <div onClick={() => this.setState({open: true})}>{this.state.value}</div>
        <div style={{display: this.state.open ? 'block' : 'none'}}>
          {this.props.options.map((option) => {
            const handleClick = () => {
              this.setState({open: false, value: option})
              this.props.onChange(option)
            }
            return (
              <div key={option} onClick={handleClick} className={this.state.value === option ? 'active' : undefined}>{option}</div>
            )
          })}
        </div>
      </div>
    )
  }
}




<MyComponent onChange={console.log} options={...}/>