反应具有相同名称属性的多个输入字段触发不同输入中的多个更新

Question

所以，问题出在下面。

  handleBankAccountInput = (e, key) => {
let name = e.target.name;
let value = e.target.value;
let validation = e.target.key;
let bankAccounts = {...this.state.bankAccounts};
let ibanValid = bankAccounts[key].validationState.iban;
let banknameValid = bankAccounts[key].validationState.bankname;
bankAccounts[key][name] = value;

switch(validation) {
  case 'iban':
    ibanValid = IBAN.isValid(value); // true
    bankAccounts[key].fieldValidationErrors.iban = ibanValid ? '' : ' is invalid IBAN';
    bankAccounts[key].validationState.iban = ibanValid ? 'success' : 'error';
    console.log("why validate all iban of bankAccounts of key: " + key );
    console.log(bankAccounts[key]);

    break;
  case 'bankname':
    banknameValid = value.length >=1; // true
    bankAccounts[key].fieldValidationErrors.bankname = banknameValid ? '' : ' is invalid bankname';
    bankAccounts[key].validationState.bankname = banknameValid ? 'success' : 'error';
    console.log("why validate all bankname of bankAccounts of key: " + key );
    console.log(bankAccounts[key]);
    break;
  default:
    break;
}

// bankAccounts[key] = bankAccount;
this.setState({bankAccounts: bankAccounts}, this.validateForm);
bankAccounts = {};
}

问题：

行'bankAccounts[key].fieldValidationErrors.iban = 伊班有效吗？ '' : '无效的 IBAN'; ' 由其他输入触发 同名属性。

  addBankAccountInput = () => {
let bankAccounts = {...this.state.bankAccounts};
// add in our new menu
let bankAccount = {...this.state.bankAccount};
bankAccount['iban'] = '';
bankAccount['bankname'] = '';
bankAccount['validationState']['iban'] = '';
bankAccount['validationState']['bankname'] = '';
bankAccount['formErrors']['iban'] = '';
bankAccount['formErrors']['bankname'] = '';
bankAccount['fieldValidationErrors']['iban'] = '';
bankAccount['fieldValidationErrors']['bankname'] = '';

let accountnum = 0;
if(bankAccounts) {
  Object.keys(bankAccounts).map((key) => accountnum++ );
}

bankAccounts[accountnum] = bankAccount;
this.setState({ bankAccounts: bankAccounts });
bankAccount = {};
bankAccounts = {};
}

这就是我添加空 bankAccount 输入的方式。

  renderBankAccountInput = (key) => {
return (
  <div key={key}>
    <FormGroup controlId={'formHorizontalBankAccount'+key} validationState={this.state.bankAccounts[key].validationState.iban}>
      <Col componentClass={ControlLabel} sm={2}>
        IBAN
      </Col>
      <Col sm={10}>
        <FormControl type="text" name={'iban'+key} key='iban' value={this.state.bankAccounts[key].iban} placeholder="iban" onChange={(e) => this.handleBankAccountInput(e, key)} />
      </Col>
      <FormControl.Feedback />
      <HelpBlock>{this.state.bankAccounts[key].formErrors.iban}</HelpBlock>
    </FormGroup>
    <FormGroup controlId={'formHorizontalBankAccount' + key} validationState={this.state.bankAccounts[key].validationState.bankname}>
      <Col componentClass={ControlLabel} sm={2}>
        Bankname
      </Col>
      <Col sm={10}>
        <FormControl type="text" name={'bankname'+key} key='bankname' value={this.state.bankAccounts[key].bankname} placeholder="Bank name" onChange={(e) => this.handleBankAccountInput(e, key)} />
      </Col>
      <FormControl.Feedback />
      <HelpBlock>{this.state.bankAccounts[key].formErrors.bankname}</HelpBlock>
    </FormGroup>
  </div>
)
}

这就是我渲染输入的方式。

像这样。

银行账户

    {Object.keys(this.state.bankAccounts).map(this.renderBankAccountInput)}
    { this.state.bankAccounts.length < 1 &&
      <HelpBlock>You should provide at least one bank account</HelpBlock>
    }
    <button
      onClick={(e) => {
        e.preventDefault();
        this.addBankAccountInput();
      }}
    >Add Bank Account</button>`

非常感谢您的帮助！

Answer 1

这是由于 React 的一个棘手且令人头疼的问题。您正在使用数组索引作为key 以通过此行<div key={key}> 映射组件。这让 React 在更新数组时感到困惑，哪个属性属于哪个组件，并导致不可预知的结果。

你可以参考这个SO answer，在Preact 中获得更多关于这个问题的解释，这是React 的替代方案。这个解释也可以应用在 React 中。

解决方案：

• 为您的组件列表生成一个 uuid。有我的图书馆提供此功能，例如lodash-uuid 或shortid
• 在您的情况下，您可以使用 bankAccounts[key][iban] 作为组件键。