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

Question

我正在研究 redux 格式的字段数组。我想摆脱任何和字段按钮，并在 keyPress 'enter' 上生成下一个字段。我们将使用扫描仪输入字段，我可以在扫描中编码 return 以呈现下一个字段。 Redux 表单默认输入太 'submit'。我已经阅读了几篇关于禁用它的在线文章。我已经关注了他们，但仍然有相同的 'enter' 键问题要提交。我愿意接受任何关于此的想法。

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[= 提交表单的原因17=]

希望对您有所帮助！

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>

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

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

Redux Form Disable Enter button on field Array

reactjs

redux

redux-form