ReactJS如何在状态下处理对象的方法？

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      obj: {
        value: 0,
        increment: this.incrementValue
      }
    };
  }

  incrementValue = () => {
    this.setState(prevState => ({
      obj: {
        ...prevState.obj,
        value: prevState.obj.value + 1
      }
    }));
  }

  render() {
    return (
      <div>
        <p>Value: {this.state.obj.value}</p>
        <button onClick={this.state.obj.increment}>Increment</button>
      </div>
    );
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      obj: {
        value: 0
      }
    };
  }

  incrementValue = () => {
    this.setState(prevState => ({
      obj: {
        ...prevState.obj,
        value: prevState.obj.value + 1
      }
    }));
  }

  render() {
    return (
      <div>
        <p>Value: {this.state.obj.value}</p>
        <button onClick={() => this.incrementValue()}>Increment</button>
      </div>
    );
  }
}