Как я могу использовать ссылки React.js без переменной?

Учитывая исходный код простой формы входа, см. ниже. Видите ли, я хочу использовать значение текстового поля 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?


reactjs javascript forms ref functional-programming
person sk22    schedule 27.06.2017    source источник
comment
Используйте состояния. Меняйте значение каждый раз, когда кто-то вводит данные.   -  person Oen44    schedule 27.06.2017
comment
См. этот ответ stackoverflow.com/questions/44473449/< /а>   -  person Shubham Khatri    schedule 27.06.2017
comment
Что здесь не так с onLogin( event.target.querySelector('[name=username]').value );, кроме игнорирования того, как мы это делаем в политике React. Я не говорю о большом приложении, а просто об этом крошечном компоненте, не использующем никаких подкомпонентов.   -  person Thomas    schedule 27.06.2017
comment
@Thomas Томас Я не уверен, будет ли мне удобно использовать querySelector/getElementBy* при разработке приложения React... Но вы правы, я имею в виду, почему бы и нет?   -  person sk22    schedule 27.06.2017
comment
Почему вы считаете поиск в DOM улучшением вместо того, чтобы использовать подход, который у вас уже есть, который отлично работает?   -  person Tom Fenech    schedule 27.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

По-видимому, правильный подход к этому — использовать состояние компонента, то есть вам нужен компонент с состоянием вместо компонента без состояния.

// 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

person sk22    schedule 27.06.2017