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引用？

1 个答案: