<字段>中的类名以 Redux 形式 [英] className in &lt;Field&gt; in Redux Form

问题描述

我创建了一个 redux-form，我想将 className 添加到每个字段以使用 css 自定义它们.每个字段的代码是:

<表单组行><字段id="符号"名称=符号"类型=文本"组件={输入字段}placeholder="在此处输入产品"/><Field id="side" name="side" component={inputField} type="select"><option value={null}>Any</option><option value="Buy">Buy</option><option value="Sell">Sell</option></字段><Field id="status" name="status" component={inputField} type="select"><option value={null}>Any</option><option value="Working">Working</option><option value="Completed">Completed</option></字段><按钮名称="submit-btn" className="filter-submit-btn" color="danger" type="submit">提交</按钮></FormGroup></表格>

我添加了一个 className 标签，但我看到我添加的占位符和 className 都没有显示.如何自定义每个字段?

解决方案

和您的自定义 InputField 应该类似于

(我从 http://redux-form.com/6.5.0/examples/submitValidation/)

export const InputField = ({ input, type, placeholder, className, meta: { touch, error } }) =>(<div><input {...input} placeholder={placeholder} type={type} className={className}/>{meta.touched &&meta.error &&<span>{meta.error}</span>}

)

或者更好的方法，如果 props 太多，你可以使用 对象解构

export const InputField = (field) =>(<div><input {...field.input} {...field}/>{field.meta.touched &&field.meta.error &&<span className="error">{field.meta.error}</span>}

)

{...field} 将提取您在 Field 中传递的所有道具.

你可以看看这个官方的redux-form示例:http://redux-form.com/6.5.0/examples/react-widgets/ 以获得更多想法.

希望有帮助:)

I've created a redux-form and i want to add className to each Field to customize them with css. The code for each field is:

<Form onSubmit={handleSubmit(requestAccountsFilter)}>
        <FormGroup row>
          <Field
            id="symbol"
            name="symbol"
            type="text"
            component={inputField}
            placeholder="Enter Product Here"
          />
          <Field id="side" name="side" component={inputField} type="select">
            <option value={null}>Any</option>
            <option value="Buy">Buy</option>
            <option value="Sell">Sell</option>
          </Field>
          <Field id="status" name="status" component={inputField} type="select">
            <option value={null}>Any</option>
            <option value="Working">Working</option>
            <option value="Completed">Completed</option>
          </Field>
          <Button name="submit-btn" className="filter-submit-btn" color="danger" type="submit">
        Submit
      </Button>
    </FormGroup>
  </Form>

I've added a className tag but i see that neither the placeholder i've added is shown nor the className. How can i customize each field?

解决方案

<Field 
    type="text" 
    className="myClass"
    component={InputField} 
    placeholder="Type here..."
/>

and your custom InputField should be something like

(I've taken this example from http://redux-form.com/6.5.0/examples/submitValidation/)

export const InputField = ({ input, type, placeholder, className, meta: { touched, error } }) => (
  <div>
      <input {...input} placeholder={placeholder} type={type} className={className}/>
      {meta.touched && meta.error && <span>{meta.error}</span>}
  </div>
)

or a better approach, if too many props are there, You can use object destructuring

export const InputField = (field) => ( 
    <div> 
        <input {...field.input} {...field} /> 
        {field.meta.touched && field.meta.error && <span className="error">{field.meta.error}</span>} 
    </div>
)

{...field} will extract all props that you have passed in Field.

You can take a look at this official redux-form example: http://redux-form.com/6.5.0/examples/react-widgets/ to get more idea.

Hope it helps :)

这篇关于<字段>中的类名以 Redux 形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！