javascript - 我可以一键设置状态并调用函数吗？

Question

我有一个按钮，当我单击它时，我使用 onClick 来设置状态并调用函数。当我将这两个 Action 配对在一起时，它似乎只设置了状态。

如果我删除坐状态函数，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 返回一个新函数，其中绑定(bind)了指定的 this 和其他提供的参数。你必须执行它。无论如何，由于您使用的是箭头函数，因此无需绑定(bind)。最后，只需在 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);
  });
}

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