reactjs - 将状态传递给 sibling onChange

Question

我有一个包含 <input type="range"></input> 的组件元素。在该组件中，我有一个函数可以在移动该 slider 时更改状态。

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

因此，当我移动该 slider 时，我想看到屏幕上多个位置的值发生变化。

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>
  )
}

Component1.jsx

function Component1() {

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

Component2.jsx

function Component2() {

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

这是我的应用程序的结构，如您所见Component1和 Component2是Slider的 sibling .

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

Answer 1

有专门针对这种情况的React hook，useContext。调查一下here .

我还找到了this tutorial在这个话题上很有帮助。