Reactjs 反应状态变量不一致

我是一个来自JS&Java背景的新手。我仍然理解react

state

属性，有两个代码示例，一个编译，一个不编译。首先，我将类的状态设置为只有一个变量

str

，然后使用这个变量。此代码不起作用。在第二个变量中，变量名为

value

，它可以工作。在

react

中是否不可能有一个不同名称的变量或多个变量？谢谢

旁注：本上下文中的术语“有效”是指能够在文本字段中键入与否的区别

表格编号（工程）：

class以其他形式扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
str:''，
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleValueChanged（事件）{
this.setState（{str:event.target.value}）；
}
handleSubmit（事件）{
警报（'Y..+this.state.str'）；
event.preventDefault（）；
}
render（）{
返回(
姓名：
);
}
}

表单代码（不起作用）：

类名称表单扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
警报（“已提交名称：”+this.state.value）；
event.preventDefault（）；
}
render（）{
返回(
姓名：
);
}
}

在第一个示例中，您将函数命名为

handleValueChanged

而不是

handleChange

这将解决您的问题：

<input type='text' value={this.state.str} onChange={this.handleValueChanged}/>

作为旁注，react中的state是object，仅此而已。所以说像这样的国家

我将类的状态设置为只有一个变量str，然后我工作 使用此变量

---

实际上，它在技术上并不准确，而且使事情听起来比实际情况更加混乱。

在第一个示例中，您将函数命名为

handlevaluechange

而不是

handleChange

这将解决您的问题：

<input type='text' value={this.state.str} onChange={this.handleValueChanged}/>

作为旁注，react中的state是object，仅此而已。所以说像这样的国家

我将类的状态设置为只有一个变量str，然后我工作 使用此变量

---

实际上在技术上并不准确，而且使事情听起来比实际情况更令人困惑。

在

其他形式中

有一些不幸：

• 您正在为

  onChange

  事件调用

  this.handleChange

  ，但此方法不存在（需要将其从

  handlevaluechange

  更改为

  handleChange

  ）
• 您尚未将两个处理程序都绑定到构造函数（您需要添加

  this.handleChange=this.handleChange.bind（this）；

  ）

固定的：

class SomeOtherForm extends React.Component {

  constructor(props) {
    super(props)
    this.state = { str: '' }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    this.setState({
      str: event.target.value
    })
  }

  handleSubmit(event) {
    event.preventDefault()
    alert(`Yo shit isssss.. ${this.state.str}`)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input 
            type='text' 
            value={this.state.str} 
            onChange={this.handleChange} />
        </label>
          <input 
            type='submit' 
            value='Submit'/>
      </form>
    )
  }
}

class以其他形式扩展React.Component{
建造师（道具）{
超级（道具）
this.state={str:'}
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
手变（活动）{
这是我的国家({
str:event.target.value
})
}
handleSubmit（事件）{
event.preventDefault（）
警报（`Yo shit isss..${this.state.str}`）
}
render（）{
返回(
姓名：
)
}
}

在

其他形式中

有一些不幸：

• 您正在为

  onChange

  事件调用

  this.handleChange

  ，但此方法不存在（需要将其从

  handlevaluechange

  更改为

  handleChange

  ）
• 您尚未将两个处理程序都绑定到构造函数（您需要添加

  this.handleChange=this.handleChange.bind（this）；

  ）

固定的：

class SomeOtherForm extends React.Component {

  constructor(props) {
    super(props)
    this.state = { str: '' }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    this.setState({
      str: event.target.value
    })
  }

  handleSubmit(event) {
    event.preventDefault()
    alert(`Yo shit isssss.. ${this.state.str}`)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input 
            type='text' 
            value={this.state.str} 
            onChange={this.handleChange} />
        </label>
          <input 
            type='submit' 
            value='Submit'/>
      </form>
    )
  }
}

class以其他形式扩展React.Component{
建造师（道具）{
超级（道具）
this.state={str:'}
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
手变（活动）{
这是我的国家({
str:event.target.value
})
}
handleSubmit（事件）{
event.preventDefault（）
警报（`Yo shit isss..${this.state.str}`）
}
render（）{
返回(
姓名：
)
}
}

完全可以在状态中管理不同的变量

constructor (props) {
  super(props)
  this.state = {
    name: '',
    lastname: ''
  }
  this.handleSubmit = this.handleSubmit.bind(this)
  this.handleChange = this.handleChange.bind(this)
}
handleSubmit (event) {
  event.preventDefault()
  console.log(this.state)
}
handleChange (event) {
  const { name, value } = event.target
  this.setState({
    [name]: value
  })
}
render () {
  <form onSubmit={this.handleSubmit}>
    <input
      name='name'
      value={this.state.name}
      onChange={this.handleChange}
    />
    <input
      name='lastname'
      value={this.state.lastname}
      onChange={this.handleChange}
    />
  </form>
}

构造函数（道具）{
超级（道具）
此.state={
名称：“”，
姓氏：“”
}
this.handleSubmit=this.handleSubmit.bind（this）
this.handleChange=this.handleChange.bind（this）
}
handleSubmit（事件）{
event.preventDefault（）
console.log（this.state）
}
手变（活动）{
常量{name，value}=event.target
这是我的国家({
[名称]：值
})
}
渲染（）{
}

注意输入的名称，它们应该与状态中的变量相同

---

完全可以在状态中管理不同的变量

constructor (props) {
  super(props)
  this.state = {
    name: '',
    lastname: ''
  }
  this.handleSubmit = this.handleSubmit.bind(this)
  this.handleChange = this.handleChange.bind(this)
}
handleSubmit (event) {
  event.preventDefault()
  console.log(this.state)
}
handleChange (event) {
  const { name, value } = event.target
  this.setState({
    [name]: value
  })
}
render () {
  <form onSubmit={this.handleSubmit}>
    <input
      name='name'
      value={this.state.name}
      onChange={this.handleChange}
    />
    <input
      name='lastname'
      value={this.state.lastname}
      onChange={this.handleChange}
    />
  </form>
}

构造函数（道具）{
超级（道具）
此.state={
名称：“”，
姓氏：“”
}
this.handleSubmit=this.handleSubmit.bind（this）
this.handleChange=this.handleChange.bind（this）
}
handleSubmit（事件）{
event.preventDefault（）
console.log（this.state）
}
手变（活动）{
常量{name，value}=event.target
这是我的国家({
[名称]：值
})
}
渲染（）{
}

注意输入的名称，它们应该与状态中的变量相同