Запутался в OnSubmit

Question

У меня есть:

<form onSubmit= {handleSubmit}>
      <div className="form-group">
        <label htmlFor="focusedInput">Level</label>
        <input className="form-control" id="focusedInput" type="number" />               
        <div className="input-group-append">
          <button className="btn " type="submit">Submit</button>
        </div>
      </div>
      </form>

в моем handleSubmit, как мне передать значение в моем контроле формы (type = "number") в функцию props?event.target.value не похоже на работу.

Answer 1

Существует несколько способов решения этой проблемы:

1. Сохранение значений в событие onChange state.Хорошие примеры в документах https://reactjs.org/docs/forms.html.

2. Определите ref и прочитайте значение при отправке.https://reactjs.org/docs/refs-and-the-dom.html

Answer 2

Вам нужно использовать состояние для управляемого ввода.

пример:

this.state={
    number :0 //initialise state variable here or in componentWillMount or componentDidMount
}

handleChange(e){
// input change handler,extract value from e, update state here.
this.setState({
    number: e.target.value
})

handleSubmit(){
    // Use state variable and make ajax call or anything you want with your input here.
}

Ваша форма ввода будет выглядеть следующим образом.

<input className="form-control" id="focusedInput" type="number" value={this.state.number} onChange={this.handleChange.bind(this)/> 
//you can bind your function in constructor too.

Ваша кнопка отправки будетвыглядит так:

<button className="btn " onClick={this.handleSubmit.bind(this)>Submit</button>

bind(this) важно, вам нужно связать свою функцию в конструкторе или так же, как упомянуто выше.когда вы связываете это в конструкторе, вам не нужно писать bind(this) в input и button