className в ‹Поле› в форме Redux

Я создал избыточную форму и хочу добавить className в каждое поле, чтобы настроить их с помощью css. Код для каждого поля:

<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>

Я добавил тег className, но вижу, что ни добавленный мной заполнитель, ни className не отображаются. Как настроить каждое поле?


redux redux-form classname
person user7334203    schedule 13.02.2017    source источник
comment
Все зависит от того, как выглядит ваша функция inputField. Вы можете показать это нам?   -  person gustavohenke    schedule 13.02.2017
comment
Все реквизиты, которые вы передали Field, будут доступны в вашем компоненте inputField. Итак, в вашем компоненте inputField вам просто нужно деструктурировать свойства, такие как <inputField {...this.props} />. Таким образом, все реквизиты, которые вы передаете Field, будут доступны в вашем компоненте inputField.`   -  person Hardik Modha    schedule 13.02.2017
comment
Мой компонент inputField выглядит следующим образом: поле экспорта по умолчанию =› ( ‹div› ‹Input {...field.input} type={field.type}› {field.children} ‹/Input› {field.meta.touched && field.meta.error && ‹span className=error›{field.meta.error}‹/span›} ‹/div› );   -  person user7334203    schedule 13.02.2017
comment
Вместо того, чтобы вставлять свой код в комментарий. Пожалуйста, отредактируйте свой вопрос.   -  person Hardik Modha    schedule 13.02.2017

Ответы (3)


arrow_upward
12
arrow_downward 

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

и ваш пользовательский InputField должен выглядеть примерно так

(Я взял этот пример с 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>
)

или лучший подход, если слишком много реквизита, вы можете использовать деструктуризация объекта

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

{...field} извлечет все реквизиты, которые вы передали в Field.

Вы можете взглянуть на этот официальный пример редукционной формы: http://redux-form.com/6.5.0/examples/react-widgets/, чтобы получить больше информации.

Надеюсь, поможет :)

person Hardik Modha    schedule 13.02.2017
comment
Последний компонент InputField показывает мне ошибку, которая не может прочитать метаданные реквизита и ввод - person user7334203; 14.02.2017
comment
Первый работал? Насчет второго не очень уверен, потому что сам не пробовал. Мне нужно изучить это. - person Hardik Modha; 14.02.2017
comment
Ни первый не работает. Это работает, только если я назначаю значение напрямую. чтобы быть более конкретным, если я назначу значение etc = fsfsdfs, это будет работать, но если я назначу значение = {значение} и в своем компоненте я установлю значение = fsdfsdfsd, это не будет работать - person user7334203; 14.02.2017
comment
Я также сделал некоторые другие изменения. Не могли бы вы попробовать обновленный ответ? - person Hardik Modha; 14.02.2017
comment
Нет, это не сработало. Также возврат выдает мне ошибку - person user7334203; 14.02.2017
comment
Я вернул свой ответ, я протестировал первую версию, и она работает нормально. Не могли бы вы скопировать, поскольку это попытка сейчас? - person Hardik Modha; 14.02.2017
comment
Всё хорошо дружище спасибо большое! Но я хочу спросить тебя о другом. я хочу, чтобы мой ящик имел значение по умолчанию. Есть ли у коробки значение, чтобы присвоить ему значение? - person user7334203; 14.02.2017
comment
Так это сработало? Возможно, вам будет полезно прочитать это. redux-form.com/6.0.0-alpha.4/examples /initializeFromState и stackoverflow.com/questions/36958251/ - person Hardik Modha; 14.02.2017
comment
Большое спасибо :) Вы были очень полезны :) - person user7334203; 14.02.2017
comment
Получилось или нет? - person Hardik Modha; 14.02.2017
comment
Рад, что это сработало. Если вы удовлетворены ответом, вы можете пометить ответ как принятый. Это также поможет другим в будущем для справки. :) - person Hardik Modha; 14.02.2017

arrow_upward
1
arrow_downward

Вы можете использовать метод деструктуризации объекта для установки className.

<Field 
        type="text" 
        input={{className:'red'}}
        component={InputField} 
        placeholder="Type here..."
    />

person luis    schedule 18.12.2017
comment
Мне очень нравится этот подход по сравнению с другими, и он устраняет необходимость добавления className к компоненту, что можно считать плохой практикой. - person DBrown; 09.12.2018

arrow_upward
1
arrow_downward

Я понимаю, что вы используете собственный рендерер, говоря component={InputField}, но для других, приходящих сюда (поскольку я не могу найти его в документации): если вы используете один из встроенных рендереров, таких как component="input" или component="select", вы можете просто добавьте className и рендерер применит его, например:

<Field name="foo" component="select" className="form-control">
</Field>
person Paul A Jungwirth    schedule 30.05.2018