reactjs 我如何将一个输入值从组件传递到类的一个状态?

eit6fx6z  于 2023-02-22  发布在  React
关注(0)|答案(2)|浏览(115)

我正在开发一个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 }

我不知道如何传递输入值,在我的例子中是范围。感谢任何人花时间来审查和给予反馈。

mznpcxlj

mznpcxlj1#

使用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 >

        );

    }
};
dsekswqp

dsekswqp2#

只需将zoomLevel重命名为value。或者使用zoomLevel代替value作为 prop :

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

传入value,然后在StoryMap中使用zoomLevel-它们不连接。

相关问题