Question

与之相适应的全新产品。我正在为Gatsby项目创建一个下拉按钮。按钮切换有效，但是我无法将所选值传递给需要的父级。

-尝试提升状态，但这导致按钮根本不显示。我在这里有点困惑，所以也许我做错了事。

-也尝试使用refs，虽然我不确定这是否是正确的用例，它是否可以工作，但是似乎在子组件中更新该值之前就已经获取了该值，并且我不确定如何更改或工作围绕这个。（当前已为此设置代码）

这两个选项对吗？或者有人可以引导我朝正确的方向前进，谢谢。

在父级中下拉：

this.dropdownRef1 = React.createRef();

componentDidUpdate(){
        console.log("Color Option:" + this.dropdownRef1.current.state.ColorOption)
      }

<DropdownBtn ref={this.dropdownRef1} mainText="Color" options={this.props.pageContext.colors || ['']} />

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>
    );
}
}

Answer 1

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

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={...}/>

反应|可重用的下拉组件|如何获得选择的选项？

1 个答案: