Question

我有这个表单，我想要用户的名字和性别，我相应地更改状态，但我的代码似乎失败，因为输出不符合我想要的。这是代码。

class Addoption extends React.Component{
  constructor(props){
    super(props);
    this.state={
      name:'',
      gender:''
    };
    this.handleaddoption=this.handleaddoption.bind(this);
  }
  handleaddoption(event){
    event.preventDefault();
    const nameofuser=event.target.elements.nametext.value;
    const genderofuser=event.target.elements.gendertext.value;
    this.setState({
      name:nameofuser,
      gender:genderofuser
    });
    console.log(this.state.name);
    console.log(this.state.gender);
  }
  render(){
    return(
      <div>
      <form >
       <input type="text" name="nametext" placeholder="name" onChange={this.handleaddoption}/>
       <input type="text" name="gendertext" placeholder="gender" onChange={this.handleaddoption}/>

      </form>
      </div>
    );  
  }
}

export default App;

当用户输入姓名和年龄时，我不会在控制台中看到他的年龄和姓名而是错误，该错误表示无法阅读无法读取属性＆＃39; nametext＆＃39;未定义的。我尝试了另外一种方法，即使它似乎没有效果。

handleaddoption(event){
    event.preventDefault();
    const nameofuser=event.target.elements.nametext.value;
    const genderofuser=event.target.elements.gendertext.value;
    this.setState({
      name:nameofuser,
      gender:genderofuser
    });
    console.log(this.state.name);
    console.log(this.state.gender);
  }
  render(){
    return(
      <div>
      <form onSubmit={this.handleaddoption}>
       <input type="text" name="nametext" placeholder="name" />
       <input type="text" name="gendertext" placeholder="gender"/>

      </form>
      </div>
    );  
  }
}

Answer 1

您需要处理稍有不同的事件。

您的处理程序函数接收一个事件对象，而event.target实际上是输入。

更改您的输入名称，以便您可以直接用它们引用状态。

然后检查组件生命周期，由于组件呈现如何起作用，您无法看到更新。注意我使用了componentDidUpdate方法，该方法在setState完成后运行，并且日志显示新状态。

以下是生命周期文档的链接：https://reactjs.org/docs/state-and-lifecycle.html

import React from 'react'

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '', gender: '' }
    this.handleChange = this.handleChange.bind(this)
  }

  componentDidUpdate() {
    console.log('gender 1', this.state.gender)
    console.log('name 1', this.state.name)
  }

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });

    console.log('gender', this.state.gender)
    console.log('name', this.state.name)
  }

  render() {
    return (
      <form action="">
        <input type="text" name="gender" value={this.state.gender || ''} onChange={this.handleChange}/>
        <input type="text" name="name" value={this.state.name || ''} onChange={this.handleChange}/>
      </form>
    )
  }
}

export default MyComponent

受控组件的形式

1 个答案: