Javascript 在React to State中简单更新输入

我正在尝试根据用户的输入更新city，它已经在状态中具有默认值；但是我得到了一个错误。在这个例子中，有人能帮我吗

另外，让我知道是否有更好的方法来完成这项任务。（因为我是react的新手，并且认为这是通过（document.getElementById）获取数据然后将其发送到组件中函数的最佳方式

import React，{Component}来自'React'；
类Home扩展组件{
状态={
城市：“伦敦”
}
更新率（值）{
this.setState（{city:value}）
}
render（）{
返回(
{本州市}

更新城市
)
}
}
导出默认主页；

错误：

 class Home extends Component {
  state = {
    city: "London"
  }
  inputEle = React.createRef();

  updateCity() {
    const value = this.inputEle.current.value;
    this.setState({
      city: value
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.city}</p>
        <input type="text" id="city" ref={this.inputEle} />
        <button onClick={this.updateCity.bind(this)}>Update City</button>
      </div>
    )
  }
}

---

updateCity

函数需要绑定到类以设置类的作用域。当前它正在窗口对象上搜索

在类的构造函数中调用下面的函数

this.updateCity = this.updateCity.bind(this)

---

在组件渲染时，没有在DOM中创建id为

city

的DOM元素，这就是为什么会出现此错误

在

updateCity

函数中使用react

ref

api或使用

browser原生api（在react中不推荐）

访问DOM，而不是将其传递到参数中

外部注释：
请将

此

绑定到“updateCity”函数。当单击事件触发

时，此

将不会引用类，它将引用事件对象。因此您必须绑定

此

。您可以使用箭头函数或

绑定

方法来实现

您可以在构造函数或onClick事件中使用

bind

请注意，不要在react中直接与DOM元素交互。始终使用react API与DOM交互

推荐：

 class Home extends Component {
  state = {
    city: "London"
  }
  inputEle = React.createRef();

  updateCity() {
    const value = this.inputEle.current.value;
    this.setState({
      city: value
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.city}</p>
        <input type="text" id="city" ref={this.inputEle} />
        <button onClick={this.updateCity.bind(this)}>Update City</button>
      </div>
    )
  }
}

class Home扩展组件{
状态={
城市：“伦敦”
}
inputEle=React.createRef（）；
updateCity（）{
常量值=this.inputEle.current.value；
这是我的国家({
城市：价值
});
}
render（）{
返回(
{本州市}

更新城市
)
}
}

不推荐使用

class Home extends Component {
  state = {
    city: "London"
  }
  inputEle = React.createRef();

  updateCity() {
    const value = document.getElementById('city').value;
    this.setState({
      city: value
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.city}</p>
        <input type="text" id="city" ref={this.inputEle} />
        <button onClick={this.updateCity.bind(this)}>Update City</button>
      </div>
    )
  }
}

class Home扩展组件{
状态={
城市：“伦敦”
}
inputEle=React.createRef（）；
updateCity（）{
常量值=document.getElementById（'city'）。值；
这是我的国家({
城市：价值
});
}
render（）{
返回(
{本州市}

更新城市
)
}
}

像这样试试，只需添加“事件”

onClick={e=>this.updateCity（document.getElementById（“city”）.value）}

import React，{Component}来自“React”；
类Home扩展组件{
状态={
城市：“伦敦”
};
更新率（值）{
this.setState（{city:value}）；
}
render（）{
返回(
你好，从家里，
{本州市}

this.updateCity（document.getElementById（“city”）.value）}>City2
);
}
}
导出默认主页；

---

您应该使用输入引用，而不是

document.getElementById

。或者您可以管理另一个状态变量，该变量会随着输入值的更改而更新。 使用箭头功能访问功能中的

此

。 我已经为您创建了一个带有输入参考的演示，希望能对您有所帮助

class Home扩展了React.Component{
inputRef=React.createRef（）；
状态={
城市：“伦敦”
}
updateCity=（）=>{
this.setState（{city:this.inputRef.current.value}）
}
render（）{
返回(
{本州市}

更新城市
)
}
}
ReactDOM.render（，document.getElementById（“根”）；

---

在React中，通常有两种方法引用/更新DOM上的值：

• 参考-非受控部件
• 状态控制元件

使用参考文献 用户引用的用于控制DOM的组件也被称为

在您的情况下，最简单的方法是使用refs，这样就不会增加复杂性：

class Home扩展了React.Component{
输入输出；
状态={
城市：“伦敦”
}
updateCity=（）=>{
this.setState（{city:this.inputRef.value}）
this.inputRef.value=“”
}
render（）{
返回(
{本州市}

this.inputRef=r}/>
更新城市
)
}
}
ReactDOM.render（，document.getElementById（“根”）；

请阅读文档。组件呈现时执行

updateCity

函数。

document.getElementById

不是如何在React.Please.read.the.documentation中处理输入。这不是问题。

This.updateCity

在组件装载时仍将执行

import React, { Component } from "react";

class Home extends Component {
  state = {
    city: "London"
  };
  updateCity(value) {
    this.setState({ city: value });
  }
  render() {
    return (
      <div>
        Hi from home,
        <p>{this.state.city}</p>
        <input type="text" id="city" />
        <button onClick={e => this.updateCity(document.getElementById("city").value)}>City2</button>
      </div>
    );
  }
}

export default Home;