semanticui реагирует на событие изменения текстового поля

(первый вопрос по SE, постараюсь придерживаться правил и рекомендаций сообщества - поискал в Google и SO, но не смог найти ответа)

Я использую модуль semantic-ui-react для реализации формы с текстовым полем.

Конструктор с функциями

constructor(props) {
super(props);
this.state = {
  loading: false,
  email: '',
  request: 'your request',
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleTextareaChange = this.handleTextareaChange.bind(this);
}
handleSubmit() {
  const { email } = this.state;
  console.log(email);
}
handleChange(e, { name, value }) {
  this.setState({
    [name]: value
  });
}
handleTextareaChange(e){
  console.log(e);
  this.setState({
    request: e
  });
}

Я могу успешно получить входные значения формы, используя функцию handleChange, привязанную к onChange из

render() {
return (
  <div>
    <Grid centered>
      <Grid.Row>
        <Grid.Column width={8}>
          <Form onSubmit={this.handleSubmit} loading={this.state.loading}>
            <Form.Field>
              <h1>Leave us a request or note</h1>
              <label>enter email address</label>
              <Form.Input placeholder='Email' name='email' value={this.state.email} onChange={this.handleChange} />
              <Form.Field label='your request/suggestion' name='request' value={this.state.request} onChange={this.handleTextareaChange} control='textarea' rows='3' />
              <Form.Button primary content='Submit' />
            </Form.Field>
          </Form>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  </div>
)
}

но обработка onChange в текстовой области с помощью handleChange дает TypeError: невозможно прочитать свойство 'name' неопределенного

должен ли я создать другую функцию для привязки к текстовой области onChange (я добавил функцию handleTextareaChange только для получения события), чтобы получить содержимое текстовой области?

Спасибо за любую помощь.


person gyoon-dev    schedule 20.04.2018    source источник


Ответы (2)


Правильный способ - получить value из объекта data, который также будет передан в событие.

<TextArea onChange={(e, { value }) => console.log(value)} />

Вы можете просмотреть пример кода здесь.

person Oleksandr Fediashov    schedule 30.04.2018
comment
спасибо, это самый рекомендуемый шаблон в React? можно еще ссылку на официальную документацию? - person gyoon-dev; 01.05.2018
comment
Это шаблон SUIR для управляемых компонентов, все компоненты возвращают реквизиты или полезные данные в качестве второго аргумента в on* функциях. Вы можете увидеть это в примерах Dropdown и Rating: react.semantic-ui.com/ modules / dropdown # dropdown-example react.semantic-ui .com / modules / rating # рейтинг-пример-контролируемый - person Oleksandr Fediashov; 01.05.2018

Я сделал еще несколько поисков, и для текстового поля правильный способ получить содержимое:

handleTextareaChange: function (evt) {
  this.setState({ request: evt.target.value });
}

Приносим извинения, если этот вопрос был избыточным или ненужным.

person gyoon-dev    schedule 20.04.2018