Question

我对来自JS＆amp; amp;的React相当新。 Java背景。我仍然理解反应state属性，并有两个代码示例，一个编译，另一个不编译。首先，我建立班级＆＃39;说明有一个变量str，我使用这个变量。此代码不起作用。在第二个中，变量名为value，它可以工作。是不是可以在react中使用不同的名称或多个变量？谢谢!!

旁注：术语＆＃34;有效＆＃34;在这种情况下，能否输入文本字段是不同的。

表格代码（作品）：

class SomeOtherForm extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
          str: '',
      };
      this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    alert('Y.. ' + this.state.str);
    event.preventDefault();
  }

  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 NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

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

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

Answer 1

在第一个示例中，您将函数handleValueChanged命名为NOT handleChange ...

这将解决您的问题：

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

作为反应中的旁注状态是一个对象并且就是这样。所以指的是这样的状态

我建立班级＆＃39;说我有一个变量str和我工作使用此变量

实际上技术上并不准确，让事情听起来更加混乱。

Answer 2

在SomeOtherForm中有一些不幸事件：

您正在为this.handleChange事件调用onChange，但此方法不存在（需要将其从handleValueChanged更改为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>
    )
  }
}

Answer 3

完全有可能在州内管理不同的变量。

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

注意输入的名称，它们应与您所在州的变量相同。

反应状态变量不一致

3 个答案: