Question

无法理解redux-form中的语法...

中

const renderField = (field) => (
    <div className="input-row">
      <input {...field.input} type="text"/>
      {field.meta.touched && field.meta.error && 
       <span className="error">{field.meta.error}</span>}
    </div>   )

如何在输入中使用扩展运算符以及为什么以下返回错误：

<input {...field.input, id} type="text"/>

我不理解的第二种语法是：

class MyCustomInput extends Component {
  render() {
    const { input: { value, onChange } } = this.props  <---??
    return (
      <div>
        <span>The current value is {value}.</span>
        <button type="button" onClick={() => onChange(value + 1)}>Inc</button>
        <button type="button" onClick={() => onChange(value - 1)}>Dec</button>
      </div>
    )
  }
}

什么是：

input: { value, onChange }

Answer 1

Queston 1:

The error from using {...field.input, id} should be something like the following:

Syntax error: ...: Unexpected token, expected }

If you already have props as an object, and you want to pass it in JSX, you can use ... as a “spread” operator to pass the whole props object (Spread Attributes)

So it appears the JSX attribute spread is not exactly the same as a es2015 spread. I believe it is limited to just the examples in the react docs.

Question 2:

The Field component passes these props to your wrapped component MyCustomInput

input.onChange(eventOrValue) : Function A function to call when the form field is changed. It expects to either receive the React SyntheticEvent or the new value of the field.

input.value: any The value of this form field. It will be a boolean for checkboxes, and a string for all other input types. If there is no value in the Redux state for this field, it will default to ''. This is to ensure that the input is controlled. If you require that the value be of another type (e.g. Date or Number), you must provide initialValues to your form with the desired type of this field.

In other words when MyCustomInput fires onChange the Field component will dispatch an action to update the form store.

The value prop is used to maintain the state MyCustomInput.

redux-form

1 个答案: