Reactjs 如何在react上将输入值从组件传递到类的状态？

大家好，我正在开发reactjs应用程序我有两个不同的组件Storymap和Ranger Ranger Ranger渲染一个输入，我可以滑动它以获得-70到70的数字我想将它传递给Storymap，以便我可以使用它调整一些div的大小

这是范围代码

header.js

class Ranger extends Component {
    state = { inputValue: null };
    render() {
        return (
            <Flex layout="row" class="navbar">
                <span style={{ color: "white", fontsize: 15 }}>Statsh</span>

                <div style={{ float: "right" }}>
                    <input type="range" name="" id="range" min="-70" max="70" onScroll={(event) => this.setState({ inputValue: event.target.value })} />

                </div>

            </Flex >

        );
        <StoryMap value={this.state.inputValue} />
    }
};

。。。。 .... 代码}

---

我不知道如何传递输入值，在我的情况下，输入值是一个范围，感谢那些花时间查看和提供反馈的人。

使用onChange而不是onScroll事件：

class Ranger extends Component {
    state = { inputValue: null };
    render() {
        return (
            <Flex layout="row" className="navbar">
                <span style={{ color: "white", fontsize: 15 }}>Statsh</span>

                <div style={{ float: "right" }}>
                    <input type="range" name="" id="range" min="-70" max="70" onChange={(event) => this.setState({ inputValue: event.target.value })} />

                </div>
                <StoryMap value={this.state.inputValue} />
            </Flex >

        );

    }
};

只需将zoomLevel重命名为value。或者使用zoomLevel而不是值作为道具：

<StoryMap value={this.state.inputValue} />
...    
class StoryMap extends React.Component {
  state = { zoomLevel: 0 };

---

你传递值，然后在StoryMap内部使用zoomLevel-它们不连接。

问题不是一次更改我认为是错误的：s传递值是错误的好吧，我在更改时更改了它，但我需要将范围值从-70到70的数字传递给stormap类。我不知道如何做啊，你应该在行中结束。弯曲谢谢你，彼得，但是如何做确保storymap包含其不适用于我的范围的值。有几种模式可确保它包含来自父组件的道具。我会推荐，并尝试这个jsfidle：zoomLevel是StoryMap中的一个状态，value是从Ranger到StoryMap的一个道具。您不需要重命名，但从语义上来说，它肯定更好

<StoryMap value={this.state.inputValue} />
...    
class StoryMap extends React.Component {
  state = { zoomLevel: 0 };