我对React是新手,并尝试模仿以下场景的更复杂的版本:
在我的实际示例中,我在这里模仿,在第2步中,很多事情都在响应状态值的更新而变化,而不仅仅是直接更新值。我想在我的父母中提供一个“重置”,这又应该反映在具有范围滑块的一个子组件中。]
这是我的简单示例:
import React, { useState } from "react"; export const App = () => { const [rangeValue, setRangeValue] = useState(0) const reset = (e) => { e.preventDefault() setRangeValue(0)//reset state to 0 in App //how can I get the initial Position in Range component back to 0? } return ( <div> <p>The range value is: {rangeValue}</p> <Range setRangeValue = {setRangeValue}/> <p><a href="/#" onClick={reset}>reset</a></p> </div> ) } const Range = ({setRangeValue: setRangeValue}) => { const handleChange = (event) => { setRangeValue(event.target.value) } return ( <input type="range" min="0" max="10" step="1" defaultValue={0} onChange={(event) => {handleChange(event)}} /> ) } export default App;
这里是一个代码沙箱:https://codesandbox.io/s/github/FergusDevelopmentLLC/range-test
完成这种想法的正确方法是什么?
我对React很陌生,并尝试模仿以下场景的更复杂版本:我有一个带有状态变量的父组件。我有一个子组件,我将函数传递给...
您希望通过将值从父级传递给Range组件并摆脱默认值来构成Range组件controlled