Setting/Clearing 输入 Redux/React

Question

我想知道如何在使用 react 时通过 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));
    }
  }
}

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

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

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

我想知道如何在 React 中使用 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>
}

编码愉快..

Setting/Clearing 输入 Redux/React

Setting/Clearing input in Redux/React

javascript

forms

reactjs

redux

redux-form