Javascript 当I'；m使用useChange从numpad设置值

这是我的组件：

const pricePicker = ({
    step,
    precision,
    input,
    placeholder,
    label,
    theme,
    props,
    meta: { touched, error },
    ...rest
}) => {
/*In the FOLLOWING LINES from "function useChange(e)" to "return [value,change]"

is the error known as Invalid hook.
*/

    function useChange(e){
         const [value,setValue] = useState(0);

         function change(event){
             setValue(value => event.target.value);
         }
         return [value,change];
    }

    const handleBlur = (e) => {

        if (e.target.value === '0') e.target.value = '0'

    }


    const handleKeypress = (e)  => {
        const characterCode = e.key
        if (characterCode === 'Backspace') return

        const characterNumber = Number(characterCode)
        if (characterNumber < 0) {
              e.preventDefault()
        }
    }

    const myTheme = {
        fontFamily: 'Arial',
        textAlign: 'center',
        header: {
            primaryColor: '#263238',
            secondaryColor: '#f9f9f9',
            highlightColor: '#FFC107',
            backgroundColor: '#607D8B',
        },
        body: {
            primaryColor: '#263238',
            secondaryColor: '#32a5f2',
            highlightColor: '#FFC107',
            backgroundColor: '#f9f9f9',
        },
        panel: {
            backgroundColor: '#CFD8DC'
        }
    };


    return(
        <div className='form-group'> 

            <label forname={input.name}>{label}</label> <br />
            <NumPad.Number
                {...rest}
                step={0.1}
                precision={2}
                placeholder={!input.value ? 'Please, type a number' : input.value}
                selected={input.value ? new NumPad.Number(input.value) : null}
                onKeyDown={(changedVal) => handleKeypress(changedVal)}
                onBlur={(changedVal) => handleBlur(changedVal)}
                onChange={(changedVal) => useChange(changedVal)}


                className='form-control'


            />
            <div className='text-danger' style={{ marginBottom: '20px' }}>
                {touched && error}
            </div>
        </div>
    );
};

export default pricePicker;

我得到了以下问题：

无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1.React和渲染器的版本可能不匹配（例如React DOM） 2.你可能违反了钩子的规则 3.同一应用程序中可能有多个React副本

我试过所有的方法，但似乎不可能。我从来没有用过钩子，以前我发布过类似的东西，但没有成功。上一篇博文讨论了useState在

pricePicker

函数中，当执行前面的代码行时，函数既不是函数组件，也不是react-hook组件，如下所示：

const handleChange = (e) =>{
     // in the following line is the error.
     const[value, setValue] = useState(0);
}

我如何解决这个问题？我需要修好它，但是怎么修好呢？我试过所有的方法，但都没有成功

---

有人知道我如何解决这个问题吗？这很重要。

错误其实很简单——挂钩只能在最短的时间内使用。在具体示例中，不能在函数

useChange

的内部使用

useState

相反，请执行以下操作：

const pricePicker = ({/*props go here*/
    const [value,setValue] = useState(0);
    // handler of input change
    const onChange = e => setValue(e.target.value);

    // the rest of the code can stay the same

   return <div className='form-group'> 
            <label forname={input.name}>{label}</label> <br />
            <NumPad.Number
                {...rest}
                step={0.1}
                precision={2}
                placeholder={!input.value ? 'Please, type a number' : input.value}
                selected={input.value ? new NumPad.Number(input.value) : null}
                onKeyDown={(changedVal) => handleKeypress(changedVal)}
                onBlur={(changedVal) => handleBlur(changedVal)}
                onChange={onChange} /* Here's we use the onChange handler */
                className='form-control'
            />
            <div className='text-danger' style={{ marginBottom: '20px' }}>
                {touched && error}
            </div>
    </div>;
}

constpricepicker=（{/*道具放在这里*/
const[value，setValue]=useState（0）；
//输入更改处理程序
const onChange=e=>setValue（e.target.value）；
//代码的其余部分可以保持不变
返回
{label}

手动按键（更改键）}
onBlur={（changedVal）=>handleBlur（changedVal）}
onChange={onChange}/*我们使用onChange处理程序*/
className='form-control'
/>
{触碰&&error}
;
}

错误其实很简单-挂钩只能在同一时间使用。在您的具体示例中，您不能在函数

useChange

内部使用

useState

相反，请执行以下操作：

const pricePicker = ({/*props go here*/
    const [value,setValue] = useState(0);
    // handler of input change
    const onChange = e => setValue(e.target.value);

    // the rest of the code can stay the same

   return <div className='form-group'> 
            <label forname={input.name}>{label}</label> <br />
            <NumPad.Number
                {...rest}
                step={0.1}
                precision={2}
                placeholder={!input.value ? 'Please, type a number' : input.value}
                selected={input.value ? new NumPad.Number(input.value) : null}
                onKeyDown={(changedVal) => handleKeypress(changedVal)}
                onBlur={(changedVal) => handleBlur(changedVal)}
                onChange={onChange} /* Here's we use the onChange handler */
                className='form-control'
            />
            <div className='text-danger' style={{ marginBottom: '20px' }}>
                {touched && error}
            </div>
    </div>;
}

constpricepicker=（{/*道具放在这里*/
const[value，setValue]=useState（0）；
//输入更改处理程序
const onChange=e=>setValue（e.target.value）；
//代码的其余部分可以保持不变
返回
{label}

手动按键（更改键）}
onBlur={（changedVal）=>handleBlur（changedVal）}
onChange={onChange}/*我们使用onChange处理程序*/
className='form-control'
/>
{触碰&&error}
;
}