时间戳

首页 > 解决方案 > React js关于更新状态值的问题

json - React js关于更新状态值的问题

问题描述

我只是 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>

      );
    }
  }

我得到了什么： 我不断得到空数组

谢谢。

标签： jsonreactjsreact-redux

解决方案

在 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>
    );
  }
}

希望对你有帮助！

推荐阅读