Question

我有一个按钮，当我点击它时，我使用onClick来设置状态并调用一个函数。当我将两个动作配对时，它似乎只设置状态。

如果我删除了状态函数，则handleClick函数可以正常工作。你能在onClick函数中进行多个函数调用吗？我在这里搜索过，发现一条帖子说你可以，不知道我的代码是不正确的。

class OverviewRender extends Component {
    constructor(props) {
         super(props);
         this.state = { 
             Selected: 'MainMenu',
             name: ''
         }
       }

    componentDidUpdate() {
        console.log("OverviewRENDER update name: " + this.state.name);
    }

    handleClick(e) {
        e.preventDefault();
        let helpFileName = this.state.name;
        helpFileName = helpFileName.toLowerCase().trim();
        //Cap the first letter in the name and add the rest of the name 
        helpFileName = helpFileName.charAt(0).toUpperCase() + helpFileName.substr(1);
        this.props.handleHelpChange(helpFileName);
        console.log("pressed " + helpFileName);
    }

按钮调用onClick ...

  <RaisedButton 
     label="Load Default Values"
     name="One"
     value={this.state.name}
     onClick={() => {this.handleClick.bind(this), this.setState({ name: 'One' })}} 
     style={buttonStyle}
   />

Answer 1

那是因为你没有执行这个功能。 Function#bind返回一个新函数，其中包含指定的this和其他提供的参数。你必须执行它。无论如何，既然你正在使用箭头功能，那么无论如何都不需要绑定。最后，只需在handleClick内设置状态，并传入您需要的任何变量：

onClick={(e) => this.handleClick(e, 'One')}

handleClick：

handleClick(e, num) {
  this.setState({
    name: num
  }, () => {
    e.preventDefault();
    let helpFileName = this.state.name; //or num
    helpFileName = helpFileName.toLowerCase().trim();
    //Cap the first letter in the name and add the rest of the name 
    helpFileName = helpFileName.charAt(0).toUpperCase() + helpFileName.substr(1);
    this.props.handleHelpChange(helpFileName);
    console.log("pressed " + helpFileName);
  });
}

另请注意，我正在设置状态 first ，然后使用回调，因为setState是异步的。您必须等到设置为访问它并获得正确的值。

Answer 2

您可以让handleClick设置状态，如上一个答案所述，或者onClick可以在回调中调用handleClick：

<RaisedButton 
 label="Load Default Values"
 name="One"
 value={this.state.name}
 onClick={() => { this.setState({ name: 'One' }, this.handleClick.bind(this) }} 
 style={buttonStyle}
/>

我可以设置状态并在单击按钮时调用函数吗？

2 个答案: