我正在开发一个reactjs应用程序。我有两个不同的组件;Storymap和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} />
}
};
在故事Map中我写上:
class StoryMap extends React.Component {
state = { zoomLevel: 0 };
....
.... code }
我不知道如何传递输入值,在我的例子中是范围。感谢任何人花时间来审查和给予反馈。
2条答案
按热度按时间mznpcxlj1#
使用onChange而不是onScroll事件:
dsekswqp2#
只需将
zoomLevel
重命名为value
。或者使用zoomLevel
代替value
作为 prop :传入
value
,然后在StoryMap
中使用zoomLevel
-它们不连接。