第一次选择未定义以 redux 形式选择表单值

Posted 2023-02-19

【中文标题】第一次选择未定义以 redux 形式选择表单值

【英文标题】：Selecting form values in redux form is undefined for the first selection

【发布时间】：2021-08-19 04:11:34

【问题描述】：

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

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

【参考方案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>