Question

我正在使用redux-form字段数组。我想摆脱任何和字段按钮，并在keyPress上生成下一个字段＆＃39;输入＆＃39;。我们将使用扫描仪输入字段，我可以在扫描返回时编码以呈现下一个字段。 Redux表单默认也输入＆＃39; submit＆＃39;。我已经阅读了几篇关于禁用它的在线文章。我跟着他们，仍然有同样的问题，进入＆＃39;关键要提交。我对此有任何想法。

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

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

可以找到工作（基本）示例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()是通过按输入

希望这有帮助！

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 Form禁用在字段数组上输入按钮

2 个答案: