Как передать значение по умолчанию для ввода в React (используя реквизит) - PullRequest
Новая
       24

Как передать значение по умолчанию для ввода в React (используя реквизит)

0 голосов
/ 25 апреля 2018

У меня есть это поле, которое отображает компонент ввода RenderInput.Мне нужно передать ему значение по умолчанию, что-то вроде value="100". 

      <Field
        name="hours"
        type="number"
        placeholder="Ingrese las horas para esta categoría"
        component={RenderInput}
        onChange={(event) => {
          handleSubmit(currentValues => this.debounceSubmitProduction({
            ...currentValues,
            hours: event.target.value,
          }))();
        }}
      />

Это компонент RenderInput: 

const RenderInput = ({
  input,
  type,
  disabled,
  readOnly,
  placeholder,
  meta: { touched, error },
  onKeyDown,
  innerRef,
}) => (
  <div>
    <input
      {...input}
      type={type}
      disabled={disabled}
      readOnly={readOnly}
      placeholder={placeholder}
      className={`font-300 ${touched && error && 'has-error'}`}
      onKeyDown={onKeyDown}
      ref={innerRef}
    />
  </div>
);

Если я поместу value="100" внутри компонента RenderInputработает нормально, но если я попытаюсь передать это значение в качестве реквизита компоненту RenderInput, это не сработает.Как передать свойство value из <Field /> в RenderInput?

Ответы [ 3 ]

0 голосов
/ 25 апреля 2018

Ну, у вас есть несколько вариантов, и ваш вопрос неверен, так как значение по умолчанию задается с помощью defaultProps, но вы можете сделать это 

<Field
        name="hours"
        type="number"
        placeholder="Ingrese las horas para esta categoría"
        component={() => (<RenderInput input={{ value: 100 }}/> )}
        onChange={(event) => {
          handleSubmit(currentValues => this.debounceSubmitProduction({
            ...currentValues,
            hours: event.target.value,
          }))();
        }}
      />

, пожалуйста, обратите внимание, как оно разрушено внутри RenderInput 

const RenderInput = ({
  input,
  type,
  disabled,
  readOnly,
  placeholder,
  meta: { touched, error },
  onKeyDown,
  innerRef,
}) => (

это означает, что все, что передано на ключе input, будет деструктурировано как реквизит для ввода, поэтому, если вам нужно отправить значение, вы должны сделать input={{value: 100}} вместо value=100, этот реквизит не будет деструктурирован.

Если вы хотите иметь значение по умолчанию, вы можете просто добавить статический в RenderInput 

RenderInput.defaultProps = {
  input: { value: 100 }
}

РЕДАКТИРОВАТЬ

Есть также функция alsoclone 

const ComponentWithProps = React.CloneElement(RenderInput, { props })

или

0 голосов
/ 25 апреля 2018 
  <Field
    name="hours"
    type="number"
    someValue='100'
    placeholder="Ingrese las horas para esta categoría"
    component={RenderInput}
    onChange={(event) => {
      handleSubmit(currentValues => this.debounceSubmitProduction({
        ...currentValues,
        hours: event.target.value,
      }))();
    }}
  />

Тогда 

const RenderInput = ({
  input,
  type,
  disabled,
  readOnly,
  placeholder,
  meta: { touched, error },
  onKeyDown,
  innerRef,
  someValue
}) => (
  <div>
    <input
      {...input}
      type={type}
      disabled={disabled}
      readOnly={readOnly}
      placeholder={placeholder}
      className={`font-300 ${touched && error && 'has-error'}`}
      onKeyDown={onKeyDown}
      ref={innerRef}
      defaultValue={someValue}
    />
  </div>
);
0 голосов
/ 25 апреля 2018

https://reactjs.org/docs/uncontrolled-components.html#default-values

С неконтролируемым компонентом часто требуется, чтобы React указывал первоначальное значение, но оставляйте последующие обновления неуправляемыми. Обрабатывать в этом случае вы можете указать атрибут defaultValue вместо value.

...