语义 ui 反应 textarea onchange 事件

semanticui react textarea onchange event

(关于 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
  });
}

我可以使用绑定到

的 onChange 的 handleChange 函数成功获取表单输入值
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>
)
}

但是使用 handleChange 处理文本区域中的 onChange 会给出一个 TypeError: Cannot read property 'name' of undefined

我是否应该创建一个不同的函数绑定到 textarea onChange(我添加了一个 handleTextareaChange 函数只是为了获取事件)以获取 textarea 的内容?

感谢您的帮助。

我做了更多搜索和文本区域 获取内容的正确方法是:

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

如果这个问题是多余的或不必要的,我们深表歉意。

正确的做法是从data对象中抓取value,这个对象也会传入事件中

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

您可以查看代码示例 here