reactjs - 将状态传递给兄弟姐妹 onChange

Question

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

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

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

滑块.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

标签： reactjs

Answer 1

有专门针对这种情况制作的 React 钩子，useContext. 在这里查看。

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