javascript - 将输入绑定(bind) react 到状态与局部变量

Question

我正在查看有关绑定(bind)输入与状态 react 的教程。我不明白的是为什么我需要将它绑定(bind)到状态而不是本地变量，因为它不会导致渲染。

在我的例子中，我有一个登录表单，在教程中它是发送消息表单。这个想法是在提交时使用反向数据流将值发送到 App.js(父级)。它看起来像这样:

class Login extends Component{

    constructor(){
        super()
        this.state = {
            username: ''
        };
        this.login = this.login.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(e) {
        this.setState({
            username: e.target.value
        });
    }
    //here I make a post request and then I set the user in app.js
    handleSubmit(e) {
        e.preventDefault();
        fetch('http://localhost:8080/login', {
            method: 'post',
            body: JSON.stringify(username)
        }).then(data =>  data.json())
          .then(data => {
              this.props.setUser(data)
              this.setState({
                  username: ''
              })
          }
    }
    render(){
        return (
            <section>
                <form onSubmit={this.submit}>
                    <input placeholder="username" 
                         onChange={this.changeInput} type="text"
                         value={this.state.username}/>
                </form>
            </section>
        )
    }

是否有理由使用 setState 而不是仅使用不会导致渲染的局部变量？

Answer 1

您不必这样做，您可以在不在状态中存储用户名的情况下使其工作。您所要做的就是监听提交事件并使用 ref 获取当时的输入值。

class Login extends Component {
  handleSubmit(e) {
    e.preventDefault();
    console.log(this.refs.username.value)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input ref="username" type="text" />
        <button type="submit">Submit</button>
      </form>
    );
  }
});

然而，使用 React 执行此操作的通常方法是将输入值存储在状态中，并在每次值更改时更新状态。这称为 controlled component并确保输入值和状态始终相互一致。

class Login extends Component {
  constructor() {
      super()
      this.state = {
          username: ''
      };
  }

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

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input onChange={e => this.setState({ username: e.target.value })} type="text" value={this.state.username} />
          <button type="submit">Submit</button>
        </form>
      </div>
    )
  }
}

除其他外，它使验证输入值或根据需要修改输入值变得更加容易。例如，您可以通过在状态更改时将状态转换为大写来强制使用大写。