语义 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。
(关于 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。