如何在没有变量的情况下使用 React.js refs？

Question

给出了一个简单登录表单的源代码，请参见下文。你看我想在单击表单的提交按钮时使用 username 文本字段的值。因为我需要引用实际的 DOM 节点来检索值，所以我将 usernameElement 变量设置为该节点。

const Login = ({ onLogin }) => {
  let usernameElement

  const handleSubmit = event => {
    event.preventDefault()
    onLogin(usernameElement.value)
  }

  return <form onSubmit={handleSubmit}>
    <input
      type="text"
      name="username"
      ref={node => { usernameElement = node }}
    />
    <button type="submit">Login</button>
  </form>
}

那么，我将如何采用函数式方法解决该问题，或者干脆摆脱 let 变量？

Answer 1

显然，正确的做法是利用组件的状态，这意味着您需要一个有状态组件而不是无状态组件。

// untested
class Login extends Component {
  state = { username: '' }

  handleChange = event => {
    this.setState({ username: event.target.value })
  }

  handleSubmit = event => {
    event.preventDefault()
    this.props.onLogin(this.state.username)
  }

  render = () =>
    <form onSubmit={this.handleSubmit}>
      <input
        type="text"
        name="username"
        value={this.state.username}
        onChange={this.handleChange}
      />
      <button type="submit">Login</button>
    </form>
}

使用这个，用户名总是绑定到 this.state.username。 handleSubmit 方法可以只使用组件状态中的用户名。

有关详细信息，请参阅此页面：https://facebook.github.io/react/docs/forms.html

如何在没有变量的情况下使用 React.js refs？

How can I make use of React.js refs without a variable?

javascript

forms

functional-programming

ref

reactjs