Question

我想知道在使用反应时，如何通过redux在清晰的场中接线。例如，我有一个带有一些示例代码的表单。

 <Field component={datewidget} id ="date" name="date" type="date" label="date" />
 <button type="button"onClick={() => {(clearMyInput());}}>
</button>

调度函数clearMyInput，使其：

const mapDispatchToProps = (dispatch) => {
  return {
    clearMyInput: () => {
      return dispatch(clearDate(datedata,value));
    }
  }
}

我的问题是如何通过简单地点击按钮并将输入值设置为无来清除输入字段。

例如在jquery中，我可以这样写：

$("#button").click(function () {
    $("#date").val("");
});

我想知道如何在反应中使用redux形式来做到这一点。

Answer 1

在Field的组件中，从商店传递属性value并附加事件处理程序以分发更改。

<Field 
  component={datewidget} 
  id="date" 
  name="date" 
  type="date" 
  label="date"
  value={this.props.fieldValue}
  onChange={this.props.changeFieldValue}
/>

然后通过调度clearDate函数，您只需将所有表单的值设置为''。我建议调查Redux Form，这样做所有这些都没有样板。

Answer 2

我确实希望添加现有答案的补充，即有清除表单的内置功能：

    <button type="button" onClick={reset}>
      Clear Values
    </button>

请注意此处的{reset} onClick操作处理程序。这是开箱即用的Redux-Form

Answer 3

import { reset, destroy } from 'redux-form'
  //
  //..code Block
render() {
  const { resetForm, destroyForm } = this.props
  return <ComponentName {...{ resetForm, destroyForm }} {...this.props} />
  }
}

// @formName: for global use(in case if you render more than one form from this container..)
const mapDispatchToProps = dispatch => ({
  resetForm: formName => dispatch(reset(formName)),
  destroyForm: formName => dispatch(reset(formName)),
})

现在您可以从组件中调用它

const ComponentName = ({ resetForm, destroyForm }, ...props) => {
  //..code Block
  <button type='submit' onClick={() => resetForm('formName') && destroyForm('formName')} > Clear </button>
}

快乐编码..

在Redux / React中设置/清除输入

3 个答案: