如何解决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>
但是当我单击子页面中的链接时,它会在旧文本下方添加新文本。它应该用新的子页面的文本替换旧的子页面的下一个。我应该如何编辑我的代码?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。