在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>

      );
    }