Чтение формы ввода? - PullRequest
Новая
       21

Чтение формы ввода?

0 голосов
/ 12 ноября 2018

Как бы вы прочитали входное значение?

На сайте Rejjs я вижу очень сложный путь !!

https://reactjs.org/docs/forms.html

Я просто хочу прочитать значение и отправить его с помощью запроса ajax fetch (). То есть Мне не нужно управлять привязками, событиями и прочим ...

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Чтение введенного пользователем значения возможно и рекомендуется через обработчики событий.

В следующем примере объясняется, как прочитать входное значение и отправить его бэкэнду через fetch при отправке формы 

  class Test extends Component{
       constructor(props){
           super(props);
           this.state = {
               name: “”
           }
       }

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

      handleSubmit = () => {
          //send the value via fetch backend I.e., this.state.name
      }
      render(){
          const { name } = this.state;
          render(
              <form onSubmit={this.handleSubmit}
                  <label>
                     Name:
                    <input type="text" value={name} onChange={this.handleChange} name="name" />
                 </label>
                 <input type="submit" value="Submit" />
              </form>
          )
      }
  }
0 голосов
/ 12 ноября 2018

Самый простой способ для чтения значений из элементов управления html - это использование обработчика событий. 

export default class myComponent extends Component {
    person = {};

    onChange = field => e => {
      this.person[field] = e.target.value;
    };

    render() {
      return (
        <Input
          id="firstName"
          name="firstName"
          autoComplete="firstName"
          autoFocus
          onChange={this.onChange('FirstName')}
        />
      );
    }
  }

В приведенном выше фрагменте кода мы в основном сообщаем, как реагировать на запуск элемента onChange при обновлении первого управляющего обновления nameName. Наш метод получит событие e, у которого есть дескриптор нашего элемента управления, и мы можем в основном проверить его значение-член, чтобы получить то, что набрано (очень похоже на jquery's $('#element').value()).

Почему это самый простой метод? потому что это достаточно универсально, чтобы позволить вам обрабатывать несколько входов в компоненте реакции. Обратите внимание, что я также инструктирую React передать мне имя элемента управления в дополнение к событию, и, используя этот метод, я могу точно знать, какой из моих входов (в случае нескольких) вызвал событие.

...