如何以redux形式禁用Field?

时间:2018-06-16 19:35:13

标签: javascript reactjs redux-form

我只是想在redux-form中禁用某个字段,如下所示,但它似乎没有任何效果。这是redux-form版本7.4.2。

  <Field
    name="mu"
    type="text"
    component={renderField}
    label="DRIFT FUNCTION [ μ(X(t),t) ]:"
    disabled={true} 
    validate={[required]}
  />

另外

  <Field
    name="mu"
    type="text"
    component={renderField}
    label="DRIFT FUNCTION [ μ(X(t),t) ]:"
    props={{ disabled: true }}
    validate={[required]}
  />

请帮助

4 个答案:

答案 0 :(得分:4)

您可以传递道具对象:

  

道具:对象[可选] :   具有自定义道具的对象将通过Field组件传递到   提供给组件prop的组件。该道具将被合并到   由Field本身提供的道具。

// outside your render() method
const renderField = field => (
  <div>
    <input
      {...field.input}
      disabled={field.disabled} // you'll use it here
      type="text"
    />
  </div>
);

// inside your render() method
<Field
  name="myField"
  props={{
    disabled: true, // like this
  }},
  component={renderField}
/>

答案 1 :(得分:3)

输入= {{        禁用:是的,    }}

将其添加到您的字段标记

答案 2 :(得分:0)

显然,如果您提供原始的React组件而不是函数,那么它将起作用:

      <Field
        name="firstName"
        component="input"
        type="text"
        disabled={true}
        placeholder="First Name"
      />

Edit Redux Form - Simple Example

所以我认为您遇到的问题是您未显示的renderField函数内部。

答案 3 :(得分:0)

如果您正在使用redux-Form,则给定的代码可以按照@Vanun的说明进行工作

<Field
    name="Name"
    component="fieldset"
    type="text"
    disabled={true}
  />