Javascript 如何在React+；ES6？

我所要做的就是在单击按钮时更改标题文本

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

类测试扩展了React.Component{
单击（）{
$（“.update”）.val（“新值”）
}
render（）{
返回(
旧价值
更新！
);
}
}

对于初学者，按钮的值与您认为的不同。您可能需要使用

.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>
  );
}

render（）{
返回(
旧价值
{this.state.buttonText}
);
}

您应该显示来自组件状态或从父级传递给它的道具的数据，而不是直接操作DOM。我建议查看以更好地了解

setState

之类的工作原理。这是一张工作票

类测试扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={value:'Old value'}
this.click=this.click.bind（this）
}
单击（）{
this.setState（{value:'newvalue'}）
}
render（）{
返回(
{this.state.value}
更新！
);
}
}

---

请注意，我使用的是ES6，正如您在示例中所做的那样——这就是为什么我要手动将

此

绑定到该函数。在ES6中，您不必将

this

绑定到React默认函数，例如

render（）

和

componentDidMount（）

，但对于任何自定义功能，您都必须进行绑定。

感谢您的回复Zeke，显然我是React的新手，仍在尝试理解它。我不知道setState的buttonText属性。是否有文档列出了我可以传递到setState的其他内容？@user2202911:您可以传递任何内容。状态中要保留的内容特定于您的组件。如果您没有阅读React文档，您应该：，。为什么要使用超级（道具）？编辑：我想我明白了，super（）将调用React.Component构造函数并使这个类成为React Component是的，

super（）

用于ES6类构造函数，因为它扩展了

React.Component

类，添加

super（props）

表示从父类传递任何属性。为了更好地理解ES6类表示法，请阅读本文。如果您像我一样对绑定<代码>这个感到好奇，那么实际上有几种方法可以做到这一点，并且根据您是否使用ES5、ES6或ES7而有所不同。这是一个很好的参考：

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

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>
      );
    }
}