代码之家 › 专栏 › 技术社区 › Arebhy Sridaran

如何在ReactJS中处理来自多个输入字段的多个onchange函数

reactjs

Arebhy Sridaran · 技术社区 · 6 年前

我有一个表单,其中有5个输入文本类型字段和一个输入文件类型字段。我使用了onchange函数。

这是表格

<form onSubmit ={this.onSubmit.bind(this)} >
            <FormGroup bssize="sm">
                <input onChange={this.handleChange} className="form-control" type="text" placeholder="Company Name" name="companyName" ref="companyName"/>
            </FormGroup>
            <FormGroup bssize="sm">
                <input onChange={this.handleChange} className="form-control" type="text" placeholder="Account Name" name="AccountName" ref="AccountName" />
            </FormGroup>
            <FormGroup bssize="sm">
                <input onChange={this.handleChange} className="form-control" type="text" placeholder="Bank Name" name="bankName" ref="bankName"/>
            </FormGroup>
            <FormGroup bssize="sm">
                <input onChange={this.handleChange} className="form-control" type="text" placeholder="Branch" name="branch" ref="branch"/>
            </FormGroup>
            <FormGroup bssize="sm">
                <input onChange={this.handleChange} className="form-control" type="text" placeholder="Account Number" name="accountNo" ref="accountNo"/>
            </FormGroup>
<FormGroup>

            <span>Bank Book Copy</span>  &nbsp; 
            <input style={{display :'none'}} type="file" onChange={this.fileSelectedHandler} ref={fileInput => this.fileInput = fileInput } />
            <Button onClick={()=>this.fileInput.click()} >
                  <Icon type="upload" /> Click to upload
            </Button>
            </FormGroup>
                <input onClick={this.fileUploadHandler} className="btn btn-primary" bsstyle="success" name="submit" type="submit" value="Submit" />
            </form>

现在我的问题是,哪个文件最后只在我的API中填充了post,我使用了AXIOS作为HTTP请求。我用存储连接器上传图片

下面我提到了我的onchange函数

constructor(props){
        super(props);
        this.state = {
            companyName : '',
            AccountName : '',
            bankName : '' , 
            bankBookCpy : '' ,
            accountNo : '' ,
            branch : '' , 
            BankList : '',
            selectedFile : null,
        }
    }

    fileSelectedHandler = event =>{
        this.setState({
            selectedFile: event.target.files[0]
        })

    }
    handleChange = event => {
        this.setState({ 
            companyName: event.target.value,
            AccountName: event.target.value,
            bankName: event.target.value,
            accountNo: event.target.value,
            branch: event.target.value
         });

    }
    fileUploadHandler = () => {
        const fd = new FormData();
        fd.append('image',this.state.selectedFile, this.state.selectedFile.name )
        axios.post('http://localhost:3000/api/attachmentBanks/bankBookCpy/upload',fd , {
            onUploadProgress : ProgressEvent => {
                console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
            }
        })
        .then(res => {
            this.setState({
                BankList: res.data.result.files.image[0].name,
            });

        });
    }

    AddMeetup(newMeetup){
        axios.request({
            method:'post',
            url:'http://localhost:3000/api/companyBankDetails',
            data : newMeetup
        }).then(response => {
            this.props.history.push('/');
        }).catch(err => console.log(err));
    onSubmit(e){
        const newMeetup = {
            companyName: this.state.companyName,
            AccountName : this.state.AccountName,
            bankName : this.state.bankName,
            branch : this.state.branch,
            accountNo : this.state.accountNo,
            bankBookCpy : this.state.BankList
        }
        this.AddMeetup(newMeetup);
        e.preventDefault();
    }

以上函数仅存储最后一个onchange值

4 回复 | 直到 6 年前

Vikum Dheemantha 6 年前

这是你的问题,你也这么说 handleChange() 对每个onchange事件执行函数。假设您更改了“公司名称”输入字段。当你改变它时,你会打电话给 手切换() 功能。然后在这个函数中,您指定 event.target.value 所有字段(companyname、accountname等)。但是 事件.目标.值 只提供要更改为调用的字段中的数据 手切换() 方法,在本例中,它是“公司名称”输入。因此,这将用您在“公司名称”中输入的文本替换所有表单数据状态。

所以,很难的方法是创建单独的函数来处理每个输入字段。但这不是一个好的做法。相反,你可以按照坂布的回答去做。

该方法将从 event.target.name 和状态数据来自 事件.目标.值 . 因此,如果更改“公司名称”的值,则状态更新代码将显示在 手切换() 将与 companyName: event.target.value, 但只更改CompanyName状态,而不更改其他窗体状态。

你不必担心图像上传系统。因为你可以使用你现有的 fileUploadHandler() 方法来处理文件上载的更改。

SakoBu 6 年前

您可以这样处理它:

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

Treycos 6 年前

首先将您的handleChange函数更改为:

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

然后将您的名称参数发送到 onChange 功能:

<form onSubmit ={this.onSubmit.bind(this)} >
    {
        Object.entries({
            "Company Name": "companyName",
            "Account Name": "AccountName",
            "Bank Name": "bankName",
            "Branch": "branch",
            "Account Number": "accountNo"
        }).map(([field, name]) => 
        <FormGroup bssize="sm" key={name}>
                <input onChange={this.handleChange(name)} className="form-control" type="text" placeholder={field} name={name} ref={name}  />
        </FormGroup>)
    }
<FormGroup>

通过映射数组来创建表单,可以避免代码中的重复。

Sahil Arora 6 年前

正如Sakobu所回答的,这种方法可以解决您的问题。我注意到的一件事是,您正在为每个输入字段分配引用,不需要这样做。

请记住,如果输入类型为复选框,则RadioButton将按event.taget.checked获取相应的值。

按event.target.type检查事件类型始终是一个很好的实践。

有关详细信息,请访问: https://reactjs.org/docs/forms.html

希望这有帮助,

干杯!!