在 redux 表单中选择表单值未定义第一次选择

Question

该示例位于https://redux-form.com/8.3.0/examples/selectingformvalues/我添加了 onChange function 以检查下拉值如何触发更改。 问题是当我第一次从下拉列表中 select 一个值时，它是未定义的。 但在那之后，任何后续更改都会成功触发价值。 谁能帮我解决这个问题？

import React from "react";
import { connect } from "react-redux";
import { Field, reduxForm, formValueSelector } from "redux-form";

let SelectingFormValuesForm = (props) => {
  const { favoriteColorValue,fullName, handleSubmit, hasEmailValue, pristine, reset, subbmitting } = props;

function onChange(favoriteColorValue) {
   console.log(" Triggered", favoriteColorValue);
}
return (
   <form onSubmit={handleSubmit}>
     <div>
      <label>First Name</label>
      <div>
       <Field
        name="firstName"
        component="input"
        type="text"
        placeholder="First Name"
       />
      </div>
     </div>
     <div>
      <label>Last Name</label>
      <div>
       <Field
        name="lastName"
        component="input"
        type="text"
        placeholder="Last Name"
       />
      </div>
     </div>
    <div>
    <label htmlFor="hasEmail">Has Email?</label>
    <div>
      <Field
        name="hasEmail"
        id="hasEmail"
        component="input"
        type="checkbox"
      />
    </div>
  </div>
  {hasEmailValue && (
    <div>
      <label>Email</label>
      <div>
        <Field
          name="email"
          component="input"
          type="email"
          placeholder="Email"
        />
      </div>
    </div>
  )}
  <div>
    <label>Favorite Color</label>
    <div>
      <Field
        name="favoriteColor"
        component="select"
        onChange={() => onChange(favoriteColorValue)}
      >
        <option />
        <option value="#ff0000">Red</option>
        <option value="#00ff00">Green</option>
        <option value="#0000ff">Blue</option>
      </Field>
    </div>
  </div>
  {favoriteColorValue && (
    <div
      style={{
        height: 80,
        width: 200,
        margin: "10px auto",
        backgroundColor: favoriteColorValue
      }}
    />
  )}
  <div>
    <button type="submit" disabled={pristine || submitting}>
      Submit {fullName}
    </button>
    <button type="button" disabled={pristine || submitting} onClick={reset}>
      Clear Values
    </button>
  </div>
 </form>
 );
};

 // The order of the decoration does not matter.

 // Decorate with redux-form
 SelectingFormValuesForm = reduxForm({
    form: "selectingFormValues" // a unique identifier for this form
 })(SelectingFormValuesForm);

 // Decorate with connect to read form values
 const selector = formValueSelector("selectingFormValues"); // <-- same as form name
 SelectingFormValuesForm = connect((state) => {
 // can select values individually
 const hasEmailValue = selector(state, "hasEmail");
 const favoriteColorValue = selector(state, "favoriteColor");
 // or together as a group
 const { firstName, lastName } = selector(state, "firstName", "lastName");
 return {
   hasEmailValue,
   favoriteColorValue,
   fullName: `${firstName || ""} ${lastName || ""}`
 };
 })(SelectingFormValuesForm);

 export default SelectingFormValuesForm;

沙盒链接为： https://codesandbox.io/s/redux-form-selecting-form-values-example-forked-tnqbb?file=/SelectingFormValuesForm.js

Answer 1

字段值将在 e.target.value

<Field
    name="favoriteColor"
    component="select"
    onChange={(e) => onChange(e.target.value)}
    >
     <option />
     <option value="#ff0000">Red</option>
     <option value="#00ff00">Green</option>
     <option value="#0000ff">Blue</option>
</Field>