Question

我想要做的就是点击按钮更改标题文字。

这是我到目前为止所做的（不起作用，没有控制台错误）

class Test extends React.Component {
    click() {
        $(".update").val("new value")
    }

    render() {
      return (
        <div>
          <h3 className="update">Old value</h3>
          <button onClick={this.click}>update!</button>
        </div>
      );
    }
}

Answer 1

对于初学者来说，按钮的值不会像你想象的那样。您可能希望使用.text更改按钮上的文本。另外，“不工作”是什么意思？

React的重点不是使用jquery进行DOM操作。你应该使用状态或道具来做到这一点。例如：

render() {
  return (
    <div>
      <h3 className="update">Old value</h3>
      <button onClick={this.setState({buttonText:'something else'})}>
        {this.state.buttonText}
      </button>
    </div>
  );
}

Answer 2

您应该显示来自组件状态的数据或从父级传递给它的道具，不直接操作DOM。我建议您查看Component API，以便更好地了解setState之类的工作方式。这是一个有效的jsfiddle

class Test extends React.Component {
    constructor(props) {
      super(props)
      this.state = {value: 'Old Value'}
      this.click = this.click.bind(this)
    }

    click() {
       this.setState({value: 'new value'})
    }

    render() {
      return (
        <div>
          <h3 className="update">{this.state.value}</h3>
          <button onClick={this.click}>update!</button>
        </div>
      );
    }
}

请注意，我在您的示例中使用的是ES6 - 这就是我将this手动绑定到该函数的原因。在ES6中，您不必将this绑定到React默认函数，例如render()和componentDidMount()，但对于您必须自定义的任何内容。

如何在React + ES6中进行简单的DOM操作？

2 个答案: