Question

我只是React的新手，提交时我试图创建一个表单，调用了一个函数“ handleSubmit”，该函数将所有信息保存到状态中，然后将其显示到网格中，但不会由于某些原因工作。我确实需要您的帮助：这是我的代码：

  export default class products extends React.Component  {
    constructor() {
      super();
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state =   
                {
                   QrCode: ''
                   }
    }

    handleSubmit(event) {
      event.preventDefault();
      const data = new FormData(event.target);

       data.set('username', data.get('username').toUpperCase());

      this.setState({QrCode: data});
      console.log(this.state);

    }


    render() {

      return (
      <div >
        <div >
              <form onSubmit={this.handleSubmit}>
                  <label htmlFor="username">Enter username</label>
                  <input id="username" name="username" type="text" />
                  <button>Send data!</button>
              </form>
            </div>


            <div style={{margin: '10%', marginTop : '5%'}}>

                <GridComponent dataSource={this.state} />

            </div>  

        </div>

      );
    }
  }

这就是我得到的： i keep getting empty array

谢谢。

Answer 1

在React中，您不需要使用表单即可从输入中获取值。

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      userName: ""
    };
  }
  render() {
    return (
      <div className="App">
        <label htmlFor="username">Enter username</label>
        <input
          value={this.state.userName}
          onChange={e => this.setState({ userName: e.target.value })}
          name="username"
          type="text"
        />
        <button
          onClick={() => {
            alert(this.state.userName);
          }}
        >
          Send data!
        </button>
      </div>
    );
  }
}

希望对您有帮助！

React js有关更新状态值的问题

1 个答案: