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

Question

我正在处理一个 redux-form 字段数组。我想摆脱任何和字段按钮，并让下一个字段生成 onkeyPress 'enter'。我们将使用扫描仪输入字段，我可以在扫描的返回中编码以呈现下一个字段。 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

希望这会有所帮助！

Answer 2

如果您不想拦截onKeyPress 上的每个键，请将“onSubmit”按钮放在表单外。像这样

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

虽然它可能有其自身的可访问性缺点