Question

我在屏幕上有多个按钮，并且在同一个容器内有另一个标签，单击后我要显示标签，然后在几秒钟后隐藏。

我正在控制this.state问题是事件触发时显示所有标签，然后全部隐藏。我发现了一些解决方案，例如分配ID等和按钮数组。

但是问题是可以有无限个按钮，所以这不是设置每个按钮状态的方法。或者，如果还有其他可能的方法。

export default class App extends React.Component {
constructor(props) {
    super();

    this.state = {
        visible: false
    }
}

_handleClick = () => {
    this.setState({
        visible: !this.state.visible
    });
    setTimeout(() => {
        this.setState({
            visible: false
        });
    },2000);
}
  render() {
return (


    <div>
        <button onClick={this._handleClick}>Button 1</Text></button>
        {this.state.visible && <span style={styles.pic}>
                Pic
            </span>
        }
    </div>

    <div>
        <button onClick={this._handleClick}>Button 2</Text></button>
        {this.state.visible && <span style={styles.pic}>
                Pic
            </span>
        }
    </div>


    <div>
        <button onClick={this._handleClick}>Button 3</Text></button>
        {this.state.visible && <span style={styles.pic}>
                Pic
            </span>
        }
    </div>

  </div>
);

} }

Answer 1

您需要每个按钮都具有自己的状态...因此，使每个按钮成为组件！

class App extends React.Component {

    render() {
        return <div>
            <Button>1</Button>
            <Button>2</Button>
            <Button>3</Button>
            <Button>4</Button>
        </div>

}

class Button extends React.Component {

    constructor(props) {
        super();

        this.state = {
            visible: false
        }
    }

    _handleClick = () => {
        this.setState({
            visible: !this.state.visible
        });
        setTimeout(() => {
            this.setState({
                visible: false
            });
        },2000);
    }
}

Answer 2

如果有无限个按钮，则可以设置关于单击哪个按钮的状态。

_handleClick = (id) => {
  this.setState({ [id]: true })
}

id将是每个按钮的唯一ID。这是一个简单的示例，说明如何设置状态。 https://codesandbox.io/s/k38qyv28r

对页面上的多个按钮做出反应，以了解单击了哪个按钮

2 个答案: