0

在下面的代码中，我无法使用 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;

提前致谢！

4

3 回答 3

1

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

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

...

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

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

于 2019-12-19T00:38:19.627 回答
1

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

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

于 2019-12-19T00:41:23.323 回答
0

好吧，我不知道为什么单击提交时无法设置状态，但 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>
        )
    }
}
于 2019-12-19T03:55:47.533 回答