Question

当用户切换按钮时，我需要触发handleChange方法，并设置其状态。方法handleChange我用动态属性名初始化对象。根据我在打印e handleChange方法时编写的代码，我只看到我点击的按钮的值。我如何同时获得ID和Value以便我可以轻松设置状态？

constructor(props) { 
    this.handleChange = this.handleChange.bind(this);

    this.state = {
        radioToggleButton: 1,

    }
}

handleChange(e){

    this.setState({
        [e.target.id]: e.target.value
    });
    console.log(this.state);
}

... 剪切的以下代码来自render（）方法。

  return(
<form onSubmit={this.savePreference}>
<FormGroup 
    controlId="meatOptionDay1"
    validationState={this.getValidationState()}
  >
        <ButtonToolbar>
            <ToggleButtonGroup className="btn-choice" type="radio" name="stateofRadio" defaultValue={this.state.radioToggleButton} onChange={this.handleChange}>
                  <ToggleButton value={1} >Op1</ToggleButton>
                <ToggleButton value={2}>Op2</ToggleButton>
              </ToggleButtonGroup>
        </ButtonToolbar>
    </FormGroup>

Answer 1

您可以像这样更改handleChange事件

handleChange(e) {
        const { name, value } = e.target;
        this.setState({
            [name]: value
        });
    }

ToggleButton使用动态属性名称初始化对象

1 个答案: