redux 形式的语法不清晰

Question

无法理解 redux 形式的语法...

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

问题 1：

使用 {...field.input, id} 的错误应该如下所示：

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)

看来 JSX 属性传播与 es2015 传播并不完全相同。我相信它仅限于反应文档中的示例。

问题二：

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

换句话说，当 MyCustomInput 触发 onChange 时，Field 组件将调度一个操作来更新表单存储。

value 属性用于维护状态 MyCustomInput。

redux 形式的语法不清晰

Unclear syntax in redux-form

redux-form