Question

如何在首页加载时将按钮文本显示全部，并在第一个用户单击时变为搜索？

class SearchBar extends React.Component {

    handleFormSubmit = e => {
        e.preventDefault();
    };


    render() {
        return (
            <div>
                <Jumbotron fluid>
                    <Container fluid>

                        <Form onSubmit={this.handleFormSubmit}>

                            <Button variant="primary" type="submit">
                                Show All
                            </Button>


                        </Form>
                    </Container>
                </Jumbotron>
            </div>
        );
    }
}

第一次：

<Button variant="primary" type="submit">
  Show All
</Button>

然后在第一个用户单击后

<Button variant="primary" type="submit">
  Search
</Button>

Answer 1

这是一个相当开放的问题，有很多不同的选择。页面加载意味着您重新加载浏览器选项卡或重新访问react应用程序，这将重置组件的状态。要存储持久状态，例如，可以使用localStorage（https://developer.mozilla.org/de/docs/Web/API/Window/localStorage）。

class SearchBar extends React.Component {

    handleFormSubmit = e => {
        e.preventDefault();
    };


    render() {
       let label = 'Show All';
       const visited = localStorage.getItem('visited');
       if(visited) {
          label= 'Search';
       } else {
          localStorage.setItem('visited', true);
       }

        return (
            <div>
                <Jumbotron fluid>
                    <Container fluid>
                        <Form onSubmit={this.handleFormSubmit}>
                            <Button variant="primary" type="submit">
                                {label}
                            </Button>
                        </Form>
                    </Container>
                </Jumbotron>
            </div>
        );
    }
}

正如注释中正确指出的那样，不应在render函数中使用localStorage。因此，如果您想将此代码段用于hello-world应用程序以外的其他应用程序，请考虑使用生命周期方法并声明是否已访问该页面。这样，安装组件时只需获取/设置一次localStorage。

class SearchBar extends React.Component {
  state = {
    visited: false,
  };

  componentDidMount() {
    const visited = localStorage.getItem('visited');
    if (visited) {
      this.setState({ visited });
    } else {
      localStorage.setItem('visited', true);
    }
  }

  handleFormSubmit = e => {
    e.preventDefault();
  };

  render() {
    return (
      <div>
        <Jumbotron fluid>
          <Container fluid>
            <Form onSubmit={this.handleFormSubmit}>
              <Button variant="primary" type="submit">
                {this.state.visited ? 'Search' : 'Show All'}
              </Button>
            </Form>
          </Container>
        </Jumbotron>
      </div>
    );
  }
}

Answer 2

您可以在确定何时显示什么文本的状态下设置默认值：

这是一个片段：

class SearchBar extends React.Component {

    state = {
      showSearch: false
    }

    handleFormSubmit = e => {
        e.preventDefault();
        this.setState({ showSearch: true });
        // other operations
    };


    render() {
        return (
            <div>
                <Jumbotron fluid>
                    <Container fluid>

                        <Form onSubmit={this.handleFormSubmit}>

                            <Button variant="primary" type="submit">
                                {this.state.showSearch ? 'Search' : 'Show All'}
                            </Button>


                        </Form>
                    </Container>
                </Jumbotron>
            </div>
        );
    }
}

在首页加载时显示特定文本

2 个答案: