Question

Hello Everybody我正在使用reactjs应用程序我有2个不同的组件Storymap和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} />
    }
};

并在Sttory地图中我打了

class StoryMap extends React.Component {
  state = { zoomLevel: 0 };

.... ....代码}

我不知道如何传递inpute值，这是我案例中的范围感谢任何需要时间审阅并提供反馈的人。

Answer 1

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

        );

    }
};

Answer 2

只需将zoomLevel重命名为value即可。或者使用zoomLevel代替value作为道具：

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

您通过value，然后在使用StoryMap的{{1}}内 - 他们没有连接。

如何将组件的输入值传递给classe的状态？

2 个答案: