在Change上将状态传递给同级

Question

我有一个包含<input type="range"></input>元素的组件。在这个组件中，我有一个函数，当滑块移动时，它会改变状态。

我不仅希望能够使用该状态来更改Slider组件内的span标记，还希望能够使用其他两个将呈现相同值的同级组件。

因此，当我移动滑块时，我希望看到屏幕上多个位置的值发生变化。

Slider.jsx

function Slider() {
const [value, setValue] = useState(0.50)
const handleChange = (event) => {
setValue(event.target.value);
}
return (
<div className='slider'>
<div className="label">
<label htmlFor="value">Value</label>
<span>{value}</span>
</div>
<input onChange={handleChange} type="range" id="value" name="value" min="0.00" max="100.00" step='0.01'></input>
</div>
)
}

组件1.jsx

function Component1() {
return (
<div>
<p>{value}</p>
</div>
)
}

组件2.jsx

function Component2() {
return (
<div>
<p>{value}</p>
</div>
)
}

这是我的应用程序的结构，您可以看到Component1和Component2是Slider的兄弟。

├── App.js
├── components
│   ├── Slider.jsx
│   ├── Component1.jsx
│   └── Component2.jsx

Answer 1

有一个React钩子是专门为这种情况设计的，useContext。看看这里。

我还发现本教程对这个主题很有帮助。

Answer 2

您可以将值状态存储在承载Slider、Component1和Component2的父组件中。例如，我使用应用程序组件：

export default function App() {
const [value, setValue] = useState(0.5);

然后，定义一个函数来设置值：

const onValueChange = (val) => {
setValue(val);
};

将ValueChange传递给Slider道具：

<Slider onValueChange={(val) => onValueChange(val)} />

每当滑块值发生变化时，您都可以调用：

const handleChange = (event) => {
props.onValueChange(event.target.value);
};

更改后的数值将反映在组成部分1和2：中

<Component1 value={value} />
<Component2 value={value} />

查看我的工作示例：https://codesandbox.io/s/silent-voice-jjqpw?file=/src/App.js:406-476

Answer 3

同级组件应在同一组件中呈现，以被视为同级组件。

例如，假设我们有一个名为ParentComponent.js的组件。我假设Component2和component 1具有名为value的属性，Slider获取名为value的属性和名为onSlide的回调函数，每当输入值发生变化并将值传递给它时，该回调函数将在Slider

// ParentComponent.js
import React from "react";
import Component2 from "path/to/Component2";
import Component1 from "path/to/Component1";
import Slider from "path/to/Slider";
export default function ParentComponent(props) {
const [value, setValue] = useState(0.50)
return (
<div>
<Slider value={value} onSlide={(value) => setValue(value)}/>
<Component1 value={value} />
<Component2 value={value} />
</div>
)
}

这样，您的3个组件将在组件内相互连接渲染它们。