reactjs - Redux 表单禁用字段数组上的 Enter 按钮

Question

我正在研究 redux 形式的字段数组。我想去掉任何 和 字段按钮，并在按键“输入”时生成下一个字段。我们将使用扫描仪输入字段，我可以在扫描返回中编码以呈现下一个字段。 Redux 表单默认输入“提交”。我读过几篇关于禁用它的在线文章。我已经关注了他们，但仍然遇到相同的“输入”键提交问题。我对此持开放态度。

class AssignDeviceForm extends Component {
  constructor(props) {
    super(props);

   FieldArraysForm = props => {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <div>
        <Well>
        <form onSubmit={handleSubmit(() => {})}>
          <FieldArray name="IMEIs" component={this.renderIMEI}/>
          <div>
            <button type="submit" disabled={submitting}>Submit</button>
            <button type="button" disabled={pristine || submitting} onClick={reset}>
              Clear Values
            </button>
          </div>
        </form>
        </Well>
      </div>
    );
  };

  renderIMEI = ({ fields, meta: { touched, error, submitFailed } }) => {
    if (fields.length == 0) {
      fields.unshift({});
    }

    return(
    <ul>
      <h3>Scan the devices you want to assign</h3>
      {fields.map((IMEI, index) => (
        <li key={index}>
          <button
            type="button"
            title="Remove Device"
            onClick={() => fields.remove(index)}
          />
          <h4>Device #{index + 1}</h4>
          <Field
            name={`${IMEI}.txtIMEI`}
            type="text"
            component={this.renderField}
            label="IMEI"
            onKeyPress={e => {
              if (e.key === 'Enter') 
              e.preventDefault()
              console.log('WAHOO!!!')
              {this.renderIMEI} 
            }}
          />    
        </li>
      ))}
    </ul>
  )};

  renderField = ({ input, label, type, meta: { touched, error, active } }) => (
    <div>
      <label>{label}</label>
      <div>
        <input {...input} type={type} placeholder={label} />
        {active && touched && error && <span>{error}</span>}
      </div>
    </div>
  );

  render(){
    return(
      <div>
        {this.FieldArraysForm()}
      </div>
    )
  }

}

Answer 1

阻止 enter 键提交表单的一种方法是利用 form 上的 onkeypress 事件，如下所示:

可以找到一个工作(基本)示例 here

<form onSubmit={handleSubmit(() => {})} onKeyPress={this.onKeyPress}>
   <FieldArray name="IMEIs" component={this.renderIMEI}/>
   <div>
       <button type="submit" disabled={submitting}>Submit</button>
       <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
   </div>
</form>

其中 this.onKeyPress 函数将检查是否按下了 enter 键

onKeyPress = (event) => {
  if (event.key === 'Enter') {
    event.preventDefault(); //<===== This stops the form from being submitted
    alert("enter")
  } else {
    alert("not enter")
  }
}

在 onKeyPress 函数中，您可以做任何您喜欢的事情，请注意 event.preventDefault() 是阻止按 enter 提交表单的原因

希望这有帮助!