JavaScript、React 和 Chakra-UI 链接：点击链接时替换文本

问题描述

我正在编写从文本中清空框并在单击链接时用新文本替换该文本的代码。但现在它只是在旧文本下方添加文本。 如果可能，这必须仅使用 JavaScript 来完成。 我试图从我知道的任何地方查找信息，但没有找到任何有用的信息。

这是我目前的代码：

import React,{ Component } from 'react';
import { withRouter } from 'react-router-dom';

import LocalStorageService from '../../../AvainiaTools/LocalStorageService.js';
import AvainiaCore from 'avainia-core-api';

//Components
import ApartmentReview from '../../partials/ApartmentReview/ApartmentReview.js';

//Chakras
import { Box,Divider,Text,Flex,Link } from '@chakra-ui/layout';
import { Image } from '@chakra-ui/image';


class CompanyPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      tab: 'default',environment: 'environment',security: 'security',helps: 'helps',faqs: 'faqs'
    };
  }

  componentDidMount = () => {

}

render() {
  const params = `${this.props.match.params.id}/${this.props.match.params.projectId}`;

  const environment = this.state.environment;

  const security = this.state.security;
  const helps = this.state.helps;
  const faqs = this.state.faqs;

  return (
    <Box bg="white" mb="4">
      <Box>
      <Box p={[4,8,4,8]}>
        <Text fontWeight="bold" fontSize="16">Testdata</Text>
        <Divider display={{ base: "none",md: "block"}} width="100%"  />

        <Box bg="lightgray" p={[4,8]} ml="800" mt="-4" mb="10">
        <Flex mb="4">
          <Link
          onClick={() => this.setState({ environment: !environment})}
          color="black" fontSize="14">Environment</Link>
        </Flex>
        <Flex mb="4">
          <Link
          onClick={() => this.setState({ security: !security})}
          color="black" fontSize="14">Safety at work</Link>
        </Flex>
        <Flex mb="4">
          <Link
          onClick={() => this.setState({ helps: !helps})}
          color="black" fontSize="14">Useful Links</Link>
        </Flex>
        <Link
        onClick={() => this.setState({ faqs: !faqs})}
        color="black" fontSize="14">FAQ</Link>
      </Box>

      <Box marginLeft="3">
      { this.state.tab == 'default' &&
      <Box bg="white" marginTop="-230" marginRight="445">
        <Text fontSize="14" margin-left="4">Testdata</Text>
        <br></br>
        <Text fontSize="14" margin-left="4">Testdata</Text>
        <br></br>
        <Text fontsize="14" margin-left="4">Testdata</Text>
        <br></br>
        <Text fontsize="14" margin-left="4">Testdata</Text>
        <br></br>
        <Text fontsize="14" margin-left="4">Testdata</Text>
        <br></br>
        <Text fontsize="14" margin-left="4">Testdata</Text>
        <br></br>
        <Text fontWeight="bold" fontSize="14" margin-left="4">Testdata</Text>
        <br></br>
        <Text fontsize="14" margin-left="4">Testdata</Text>
        <br></br>
        <Text fontsize="14" margin-left="4">Testdata</Text>
        </Box>
        }

        {this.state.environment !== 'environment' &&
        <Box marginRight="445">
          <Box bg="white" w="100%">
            <Text fontSize="14">Testidata</Text>
          </Box>
          </Box>
          }

          {this.state.security !== 'security' &&
          <Box marginRight="445">
          <Box bg="white" w="100%">
            <Text fontSize="14">Testdata</Text>
          </Box>
          </Box>
          }

          {this.state.helps !== 'helps' &&
          <Box marginRight="445">
          <Box bg="white" w="100%">
            <Text fontSize="14">Testdata</Text>
          </Box>
          </Box>
          }

          {this.state.faqs !== 'faqs' &&
          <Box marginRight="445">
          <Box bg="white" w="100%">
            <Text fontSize="14">Testdata</Text>
          </Box>
          </Box>
          }

        </Box>
      </Box>
      </Box>
      <Box p={[4,8]}>
      <Image src="https://via.placeholder.com/1050x195" alt="placeholder" />
      </Box>
      </Box>
  )
}
}


export default withRouter(CompanyPage);

解决方法

我成功编辑了链接的 onClick 代码，以便在单击链接时子页面的文本替换原始文本。这是我的新链接代码：

<Box bg="lightgray" p={[4,8,4,8]} ml="800" mt="-4" mb="10">
    <Flex mb="4">
      <Link
      onClick={() => this.setState({ environment: !environment,tab: !environment})}
      color="black" fontSize="14">Environment</Link>
    </Flex>
    <Flex mb="4">
      <Link
      onClick={() => this.setState({ security: !security,tab: !security,})}
      color="black" fontSize="14">Safety at work</Link>
    </Flex>
    <Flex mb="4">
      <Link
      onClick={() => this.setState({ helps: !helps,tab: !helps})}
      color="black" fontSize="14">Useful links</Link>
    </Flex>
    <Link
    onClick={() => this.setState({ faqs: !faqs,tab: !faqs})}
    color="black" fontSize="14">FAQs</Link>
  </Box>

但是当我单击子页面中的链接时，它会在旧文本下方添加新文本。它应该用新的子页面的文本替换旧的子页面的下一个。我应该如何编辑我的代码？