JavaScript，React 和 Chakra-UI 链接：单击链接时替换文本

Question

我正在编写从文本中清空框并在单击链接时用新文本替换该文本的代码。 但现在它只是在旧文本下方添加文本。 如果可能，必须仅对 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, 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, 4, 8]}> <Image src="https://via.placeholder.com/1050x195" alt="placeholder" /> </Box> </Box> ) } } export default withRouter(CompanyPage);

Answer 1

我成功编辑了链接的代码 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>

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