字段值未在自定义组件中打印

Question

出于某种原因，字段值未打印到我的 customComponent 常量中。

const CustomComponent = function(field) {
  console.log(field.input.value); //blank, no value
  return (
    <div>
      <input { ...field.input } type={field.type} placeholder={field.placeholder} className={field.className} />
    </div>
  );
}

......

<Field name="test" component={CustomComponent} type="text" placeholder="Test" value="testvalue" />

Answer 1

这里的问题是您试图直接设置 redux-form Field 组件的 value，但是 redux-form 的整个想法是你让图书馆来处理。

如果您想为 redux-form Field 设置初始值，请使用 initialValues -prop 来执行此操作（请参阅文档中的 "Initialize from state" 示例）

只需将 redux connect 装饰器粘贴在 reduxForm 装饰器之上，您就可以使用 redux 状态来设置初始表单值

class MyForm extends Component {
  render() {
    return (
      <form>
        { /* This one will have the static initial value */ }
        <Field
          name="staticValue"
          component={ CustomComponent }
          type="input"
          placeholder="Static Placeholder"
        />
        { /* This one will have the dynamic initial value */ }
        <Field
          name="dynamicValue"
          component={ CustomComponent }
          type="input"
          placeholder="Dynamic Placeholder"
        />
      </form>
    )
  }
}

const mapStateToProps = reducers => {
  return {
    initialValues: {
      staticValue: 'some static default initial value',
      dynamicValue: reducers.dynamicReducer.dynamicValue
    }
  }
}

@connect(mapStateToProps)
@reduxForm({ formName: 'MyForm' })
class MyFormContainer extends Myform {}

希望对您有所帮助！

字段值未在自定义组件中打印

Field value not printing in custom component

reactjs

redux-form