Question

我有一个受控制的组件，该组件通过一个handleChange方法管理多个输入（范围和复选框）。

我的范围和复选框未响应事件。我一直在使用此article作为参考。我克隆了我一直关注的文章的示例，并且该示例可以正常工作，因此我对为什么我的组件不可用感到困惑。

import React, {useState} from 'react';

    export default function App() {

      const [state, setState] = useState({
        rightAngle:  11,
        leftAngle: 4.5,
        rightLength: 0.75,
        leftLength: 0.65,
        isChecked: true
      })

      function handleChange(evt) {
       const value =
           evt.target.type === "checkbox" ? evt.target.checked : evt.target.value;
       setState({
         ...state,
         [evt.target.name]: value
       });
      }


      return (
         <Container>

           <Form>
             <FormItem className="form--angle">
               <FormLabel htmlFor="angleRight">Right Angle</FormLabel>

               <input type="range" className="angleRight" name="angleRight"  min="3" max="15"
                      value={state.rightAngle} step="0.1" onChange = {handleChange}/>

               <FormLabel htmlFor="angleLeft">Left Angle</FormLabel>

               <input type="range" id="angleLeft" className="angleLeft" name="angleLeft" min="3" max="15"
                      value={state.leftAngle} step="0.1" onChange={handleChange}/>
             </FormItem>

             <FormItem className="form--len">
               <FormLabel htmlFor="lengthRight">Right Length</FormLabel>

               <input type="range" id="lengthRight" className="lengthRight" name="lengthRight" min="0.63"
                      max="0.75" value={state.rightLength} onChange={handleChange} step="0.01"/>

               <FormLabel htmlFor="lengthLeft">Left Length</FormLabel>

               <input type="range" id="lengthLeft" className="lengthLeft" name="lengthLeft" min="0.63"
                      max="0.75" value={state.leftLength} onChange={handleChange} step="0.01"/>
             </FormItem>

             <FormItem className="form--leaves">
               <FormLabel htmlFor="leaves">Drawing leaves?</FormLabel>
               <input type="checkbox" id="leaves" className="leaves" name="leaves" checked={state.isChecked} onChange={handleChange}/>
             </FormItem>

           </Form>

         </Container>

      );
    }

Answer 1

您的state属性名称应与输入name和value保持同步。您的状态属性与输入名称不匹配，因此不匹配。

例如：您已经在状态中定义了rightAngle，并且输入名称为angleRight。同样对于该复选框，状态中的名称为isChecked，但在输入中名称为`leaves。

。

进行如下更正

状态

  const [state, setState] = useState({
        angleRight:  11,
        angleLeft: 4.5,
        lengthRight: 0.75,
        lengthLeft: 0.65,
        leaves: true
  })

JSX

<Container>

           <Form>
             <FormItem className="form--angle">
               <FormLabel htmlFor="angleRight">Right Angle</FormLabel>

               <input type="range" className="angleRight" name="angleRight"  min="3" max="15"
                      value={state.angleRight} step="0.1" onChange = {handleChange}/>

               <FormLabel htmlFor="angleLeft">Left Angle</FormLabel>

               <input type="range" id="angleLeft" className="angleLeft" name="angleLeft" min="3" max="15"
                      value={state.angleLeft} step="0.1" onChange={handleChange}/>
             </FormItem>

             <FormItem className="form--len">
               <FormLabel htmlFor="lengthRight">Right Length</FormLabel>

               <input type="range" id="lengthRight" className="lengthRight" name="lengthRight" min="0.63"
                      max="0.75" value={state.lengthRight} onChange={handleChange} step="0.01"/>

               <FormLabel htmlFor="lengthLeft">Left Length</FormLabel>

               <input type="range" id="lengthLeft" className="lengthLeft" name="lengthLeft" min="0.63"
                      max="0.75" value={state.lengthLeft} onChange={handleChange} step="0.01"/>
             </FormItem>

             <FormItem className="form--leaves">
               <FormLabel htmlFor="leaves">Drawing leaves?</FormLabel>
               <input type="checkbox" id="leaves" className="leaves" name="leaves" checked={state.leaves} onChange={handleChange}/>
             </FormItem>

           </Form>

         </Container>

在React中使用单个onChange处理程序处理多个输入

1 个答案: