Reactjs 如何使用react引导从按钮返回事件？

我有以下代码：

class SelectorEdit extends React.Component {
    constructor(){
        super();
        this.state = {
            displayText: '',
            isEditing: false
        };
        this.renderList = this.renderList.bind(this);
        this.onSelectionHandle = this.onSelectionHandle.bind(this);
    }

    componentDidMount(){
        if(typeof this.props.val !== 'undefined' && typeof this.props.options !== 'undefined'){

            let result = this.props.options.find(x => x.value === this.props.val);
            const displayText = result.text;
            this.setState( {displayText} );
        }
    }

    onSelectionHandle = (e) => {
        console.log('key: ', e); //returns undefined for e
    }

    renderList(){
        if (typeof this.props.options === "undefined"){
            return;
        } else if(this.props.options){
            return this.props.options.map((option)=>{
                return(
                    <Button eventKey={option.value} onClick={this.onSelectionHandle}>{option.text}</Button>
                );
            });
        }

    }

    render(){
        return(
            <div className="display-choices">
                <ButtonGroup >{this.renderList()}</ButtonGroup>
            </div>
        )
    }
}export default SelectorEdit;

class SelectorEdit扩展了React.Component{
构造函数（）{
超级（）；
此.state={
显示文本：“”，
i编辑：错误
};
this.renderList=this.renderList.bind（this）；
this.onSelectionHandle=this.onSelectionHandle.bind（this）；
}
componentDidMount（）{
if（typeof this.props.val！=“未定义”&&typeof this.props.options！=“未定义”）{
让result=this.props.options.find（x=>x.value==this.props.val）；
const displayText=result.text；
this.setState（{displayText}）；
}
}
onSelectionHandle=（e）=>{
log（'key:'，e）；//返回未定义的e
}
renderList（）{
if（typeof this.props.options==“未定义”）{
返回；
}else if（this.props.options）{
返回此.props.options.map（（选项）=>{
返回(
{option.text}
);
});
}
}
render（）{
返回(
{this.renderList（）}
)
}
}导出默认选择编辑；

---

我不知道为什么在这种情况下，这项活动没有通过？react引导是否允许您通过单击按钮获取事件？他们在文档中的示例只给出了获得单击的场景，而不是在单击中获得所选项目。有什么建议吗？

你可以做类似的事情，而不是依赖活动。这可以重构得更好，但我只是想展示一下流程。最终，您可以将按钮作为纯组件编写，并将按钮文本绑定到onSelectionHandle函数

    constructor(){
    super();
    this.state = {
        displayText: '',
        isEditing: false
    };
    this.renderList = this.renderList.bind(this);
    this.onSelectionHandle = this.onSelectionHandle.bind(this);
    this.bindSelectionHandle = this.bindSelectionHandle.bind(this);
}

onSelectionHandle( buttonText ) {
  console.log(buttonText); //returns button text clicked
}

bindSelectionHandle( buttonText ) {
  return onSelectionHandle.bind( this, buttonText )
}

renderList(){
  if (typeof this.props.options === "undefined"){
        return;
    } else if(this.props.options){
        return this.props.options.map((option)=>{
            return(
                <Button eventKey={option.value} onClick={this.bindSelectionHandle( option.text ) }>{option.text}</Button>
            );
        });
    }

}

render(){
    return(
        <div className="display-choices">
            <ButtonGroup >{this.renderList()}</ButtonGroup>
        </div>
    )
}

constructor（）{
超级（）；
此.state={
显示文本：“”，
i编辑：错误
};
this.renderList=this.renderList.bind（this）；
this.onSelectionHandle=this.onSelectionHandle.bind（this）；
this.bindSelectionHandle=this.bindSelectionHandle.bind（this）；
}
onSelectionHandle（按钮文本）{
console.log（buttonText）；//返回单击的按钮文本
}
bindSelectionHandle（按钮文本）{
返回onSelectionHandle.bind（这个，buttonText）
}
renderList（）{
if（typeof this.props.options==“未定义”）{
返回；
}else if（this.props.options）{
返回此.props.options.map（（选项）=>{
返回(
{option.text}
);
});
}
}
render（）{
返回(
{this.renderList（）}
)
}

我根据您的意见更改了代码，这是否更符合您的建议？我是一个新的反应引导，感觉我的方式通过。我在onSelectionHandle=（e）=>{第一个等号。对不起，我错了，引导程序在事件中似乎不起作用，而react通常所有内容都保持在可管理的状态。您希望对事件做什么？我有一个按钮组。我想单击组中的一个按钮，并根据单击的按钮设置我的状态。我正在使用道具传递内容我想要按钮组中按钮的版本选项。我在等号onSelectionHandle=（buttonText）=>{上不断出现错误。这是es7代码还是我需要做任何事情才能正确渲染？错误是什么？同时删除

this.onSelectionHandle=this.onSelectionHandle.bind（this）

可能与此相关啊，是的，您将需要这样做，或者只是转换回您在constructorLet us中使用绑定的方式。