Question

在下面的代码中，我无法使用this.setState（{name：this.nameRef.current.value}）。有人可以告诉我为什么会这样吗？在ref的当前值中包含某些内容后，为什么不能使用它来更新组件的当前状态？另外，这是错误的做法吗？但是，如果它不起作用也没关系。

class App extends React.Component {
  constructor(){
    console.log('constructor');
    super();
    this.state = {name : '', password: ''}
    this.nameRef = React.createRef()
    this.pwdRef = React.createRef()
  }

  handleLogin = (val) =>{
      val.preventDefault();
      this.setState({name: this.nameRef.current.value}) //Not working
      alert("Welcome"+this.nameRef.current.value);
      console.log(this.state.name); //Outputs empty string
  }
    render(){
      return(
        <React.Fragment>
          <form>
            <div className={"form-group"}>
              <label>Username: </label>
              <input style={{width: '60%', display: 'inline'}} name="name" type="text" className={"form-control"} placeholder="Enter name" ref={this.nameRef}/>
            </div>
            <div className={"form-group"}>
              <label>Password: </label>
              <input style={{width: '60%', display: 'inline'}} type="text" name="pass" className={"form-control"} placeholder="Enter password" ref={this.pwdRef}/>
            </div>
            <button type="submit" className={"btn btn-primary"} onClick={this.handleLogin}> Login </button>
          </form>
        </React.Fragment>
        )
    }
}

export default App;

谢谢！

Answer 1

不是最佳实践。在您的输入中添加一个onChange道具，例如：

onChangeName = e => this.setState({ name: e.target.value });

...

<input ...other things... onChange={this.onChangeName} value={this.state.name} />

这样，每当用户输入一个输入时，它就会自动更新状态。应当谨慎使用Ref，因为React通常具有更好的方法来完成大多数事情。

Answer 2

在回答问题之前，您应该做的是将每个输入的值跟踪到相应的状态变量。您可以使用onChange侦听器执行此操作（通过event.target.value获取值）

但是，要解决这个问题，您要问的是是否可以使用refs从组件中获取值并使用它。可以，并且应该看到值，我认为正在发生的事情是输入没有更新“值”（当您使用onChange和value = {this.state.variableName}控制它时，将更新该值）。在实现onChange和东西之后，尝试使用ref记录输入值，看看它是否改变

Answer 3

好吧，我不知道为什么当我单击Submit时不能设置状态，但是onChange（）解决了我的问题。效果很好：

class App extends React.Component {
  constructor(){
    console.log('constructor');
    super();
    this.state={name: '',password: ''}
    this.nameRef = React.createRef()
    this.pwdRef = React.createRef()
  }

  setStat1 = () =>{
    this.setState({name: this.nameRef.current.value})
  }

  setStat2 = () =>{
    this.setState({password: this.pwdRef.current.value})
  }

  handleLogin = (val) =>{
    console.log(this.state.name+" : "+this.state.password)
      val.preventDefault();
      alert("Welcome"+this.nameRef.current.value);
  }
    render(){
      return(
        <React.Fragment>
          <form>
            <div className={"form-group"}>
              <label>Username: </label>
              <input style={{width: '60%', display: 'inline'}} name="name" type="text" className={"form-control"} onChange={this.setStat1} placeholder="Enter name" ref={this.nameRef}/>
            </div>
            <div className={"form-group"}>
              <label>Password: </label>
              <input style={{width: '60%', display: 'inline'}} type="text" name="pass" className={"form-control"} placeholder="Enter password" onChange={this.setStat2} ref={this.pwdRef}/>
            </div>
            <button type="submit" className={"btn btn-primary"} onClick={this.handleLogin}> Login </button>
          </form>
        </React.Fragment>
        )
    }
}

关于react JS中的ref /我可以使用ref来设置组件的状态吗？

3 个答案: