[英]How can I assign value to a variable inside a UI component in React?
I am relatively new to React and Javascript.我对 React 和 Javascript 比较陌生。 I am trying to declare a temporary variable and assign the value companyData.name to it as I need to collect the 2 variables like companyData.name.
我正在尝试声明一个临时变量并将值 companyData.name 分配给它,因为我需要收集像 companyData.name 这样的 2 个变量。
This is my code.这是我的代码。
<Box sx={{ flexGrow: 3 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={2.5}>
<Grid container spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 16 }} display="flex"
justifyContent="center"
alignItems="center" >
<Grid item xs={2} sm={4} md={6} lg={7.3} >
Company 1:
<Box
sx={{ flexGrow: 1, alignItems: "baseline" }}
display="flex"
justifyContent="flex-end"
alignItems="flex-end">
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 22 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} mb="30px" width='100%'>
<Autocomplete
id="input"
options={allCompanies}
renderInput={(params) => {
const { InputLabelProps, InputProps, ...rest } = params;
return <InputBase placeholder='Search for a company...' sx={{ color: light ? "white" : "black", width: "100%" }} {...params.InputProps} {...rest} />
}}
onChange={(event, value) => fetchCompanyData(value)}
color="primary"
style={{ width: "75%", border: light ? "1px solid white" : "1px solid black", borderRadius: "15px", padding: "10px" }}
defaultValue={companyData.name}
/>
</Grid>
</Box>
</Grid>
<Grid item xs={2} sm={4} md={6} lg={7.3} >
Company 2:
<Box
sx={{ flexGrow: 1, alignItems: "baseline" }}
display="flex"
justifyContent="flex-end"
alignItems="flex-end">
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2, lg: 2 }} columns={{ xs: 2, sm: 2, md: 12, lg: 22 }} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} mb="30px" width='100%'>
<Autocomplete
id="input"
options={allCompanies}
renderInput={(params) => {
const { InputLabelProps, InputProps, ...rest } = params;
return <InputBase placeholder='Search for a company...' sx={{ color: light ? "white" : "black", width: "100%" }} {...params.InputProps} {...rest} />
}}
onChange={(event, value) => fetchCompanyData(value)}
color="primary"
style={{ width: "75%", border: light ? "1px solid white" : "1px solid black", borderRadius: "15px", padding: "10px" }}
defaultValue={companyData.name}
/>
</Grid>
</Box>
</Grid>
</Grid>
</Box>
{chartData ? <CompanyChart dataset={chartData} companyName={companyData.name} companyName2={companyData.name}/>:<div> Loading chart...</div>}
I need to assign companyData.name
of Company 1 to companyName
in the above line.我需要在上面的行中将公司 1 的
companyData.name
分配给companyName
。 I have tried using React.useState for this purpose.为此,我尝试使用 React.useState。 But I am unable to set the state inside a UI component.
但我无法在 UI 组件中设置状态。
const [company1,setCompany1]=React.useState([]);
setCompany1(companyData.name)
Any help regarding how to proceed would be appreciated.任何有关如何进行的帮助将不胜感激。 I just need to pass the names of 2 companies to .
我只需要将 2 家公司的名称传递给 .
You are using an array as default state ([]) and then trying to pass a string as a value setCompany(companyData.name).您正在使用数组作为默认状态 ([]),然后尝试将字符串作为值 setCompany(companyData.name) 传递。
Try this:尝试这个:
const [company1,setCompany1]=React.useState('');
setCompany1(companyData.name)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.