Question

我正在使用ant设计制作不同的表单组件，并尝试绑定多个不同的输入

这是代码：

this.state = {
    title: '',
    product: '',
    options: 0,
    price: 0,
}

onTitleChange = (e) => {
    this.setState({
        title: e.target.value
    })
}

onProductChange = (e) => {
    this.setState({
        product: e.target.value
    })
}

onHandleChange = value => {
    this.setState({
        priceOption: value
    })
}

onNumberChange = e => {
    this.setState({
        price: e.target.value
    })
}


<FormItemRow>
<Col span={24} style={colStyle}>
    <FormItem label={'title'} colon={false} style={{ marginBottom: 0 }}>
        {getFieldDecorator('title', {
            rules: [
                { required: true, message: 'title is required' },
            ],
        })(<Input onChange={this.onTitleChange}/>)}
    </FormItem>
</Col>
</FormItemRow>

<FormItemRow>
<Col span={24} style={colStyle}>
    <FormItem label={'product-number'} colon={false} style={{ marginBottom: 0 }}>
        {getFieldDecorator('product-number', {
            rules: [{ required: true, message: 'product-number is required' }],
        })(<Input onChange={this.onProductChange}/>)}
    </FormItem>
</Col>
</FormItemRow>

<FormItemRow>
<Col span={12} style={colStyle}>
    <FormItem label={'options'} colon={false} style={{ marginBottom: 0 }}>
        {getFieldDecorator('options', {
            rules: [
                { required: true, message: 'options is required' },
            ],
        })(<Select onChange={this.onHandleChange}>{this.handWashOptions(this.props.handWashOptions)}</Select>)}
    </FormItem>
</Col>
<Col span={12} style={colStyle}>
    <FormItem label={'price'} colon={false} style={{ marginBottom: 0 }}>
        {getFieldDecorator('price', {
            rules: [
                { required: true, message: 'price is required' },
            ],
        })(<Input type="number" onChange={this.onNumberChange}/>)}
    </FormItem>
</Col>
</FormItemRow>

标题和产品仅使用输入组件。

选项正在使用 Select 组件。

和价格使用的是输入类型编号组件。

我认为在每个输入组件上使用不同的onChange回调是非常低效的。

有什么方法可以绑定一个onChange回调函数？

Answer 1

您可以简单地使一个通用函数handleChange，传递要更新的名称和值

 handleChange(name,value){
   this.setState({[name]: value})
 }

并传递值来处理这样的变化

<Input onChange={(name,value)=>this.onTitleChange(name,value)}/>

您可以使用e.target.value从目标中获取value，同样，如果您需要对某些特定元素使用不同的逻辑，则只需在handleChange中添加例外即可

Answer 2

如Handling Multiple Inputs中所述，

为每个元素添加名称属性，然后让处理函数根据 event.target.name 的值选择要执行的操作。

因此您可以：

Andress-MacBook-Pro:~ alpha$ mysql -uroot -p
Enter password: 
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
Andress-MacBook-Pro:~ alpha$ /usr/local/mysql/bin/mysql -uroot -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 22
Server version: 8.0.17 MySQL Community Server - GPL

Copyright (c) 2000, 2019, Oracle and/or its affiliates. All rights reserved.


Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

Answer 3

    this.state = {
        fields:{
            each:
            field:
            you:
            have:
          }
      }




    handleChange = (event) => {
                const { value, type, name } = event.currentTarget
                console.log(type, value, name);
                this.setState(prevState => ({
                    fields: {
                        ...prevState.fields,
                        [name]: type === 'number' ? parseInt(value, 10) : value
                    }
                }));
            };

如何为不同的输入绑定多个onChange回调？

3 个答案: