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

我有一个受控制的组件,它通过一个handleChange方法管理多个输入(范围和复选框)。

My range and checkbox are not responding to events. I have been using this article as a reference. I cloned the example for the article that I have been following and it works, so i am stumped as to why my component is not.

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>

      );
    }
评论
  • 墨小沫
    墨小沫 回复

    Your state property name should be in sync the input name and value. Your state properties are NOT matching with the input name and hence the issue.

    Eg: you have defined rightAngle in the state and have given the input name as angleRight. Also for the checkbox, name in the state is isChecked but in the input the name is `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>