![](/img/trans.png)
[英]ReactJS: How to change state property value in a component, when the state property value in another component is a certain value
[英]How can I change the value of a property on the call of a reusable component on Reactjs?
我有一個帶有表單的模式,我試圖在其中渲染一個可以在任何地方使用不同輸出的組件。
例如:
這是組件:
import { Select, SelectItem } from 'carbon-components-react';
import React from 'react';
import { translate } from 'react-i18next';
import PropTypes from 'prop-types';
import { uniqBy } from 'lodash';
import GetShipmentsAddresses from './containers/GetShipmentsAddresses';
const AddressesSelect = ({ t, handleAddresses, value }) => (
<GetShipmentsAddresses>
{({ data }) => {
const unique = uniqBy(data, 'originationAddress.description');
const renderAddresses = unique.map(addresses => (
<SelectItem
value={addresses.originationAddress.description}
key={addresses.id}
text={addresses.originationAddress.description}
/>
));
return (
<Select
id="select-3"
defaultValue="Shipped From"
labelText={t('shipments.shippedFrom')}
onChange={handleAddresses}
>
<SelectItem
disabled
hidden
value=""
text={t('shipments.selectLocation')}
/>
<SelectItem value="" text={t('shipments.allLocations')} />
{renderAddresses}
</Select>
);
}}
</GetShipmentsAddresses>
);
AddressesSelect.propTypes = {
t: PropTypes.func.isRequired,
handleAddresses: PropTypes.func.isRequired,
};
export default translate()(AddressesSelect);
我需要在這樣的父組件上調用它:
const ParentComp = ({ VALUE }) => (
<AddressesSelect
handleAddresses={this.handleChange('shippedFrom')}
VALUE="originationAddress" // this is would be VALUE
title={t('shipments.shippedFrom')}
/>
<br />
<AddressesSelect
handleAddresses={this.handleChange('shippedTo')}
VALUE="destinationAddress" // this is would be VALUE
title={t('shipments.shippedFrom')}
/>
)
因此,唯一要從呼叫更改為另一個的是,不是說addresses.originationAddress.description
,而是必須說addresses.destinationAddress.description
唯一改變的詞是originationAddress
到destinationAddress
。
所以讓我們說我想做這樣的事情:
const AddressesSelect = ({ t, handleAddresses, VALUE }) => (
<GetShipmentsAddresses>
{({ data }) => {
const unique = uniqBy(data, 'VALUE.description');
const renderAddresses = unique.map(addresses => (
<SelectItem
value={addresses.VALUE.description}
key={addresses.id}
text={addresses.VALUE.description}
/>
));
return (
<Select
id="select-3"
defaultValue="Shipped From"
labelText={t('shipments.shippedFrom')}
onChange={handleAddresses}
>
<SelectItem
disabled
hidden
value=""
text={t('shipments.selectLocation')}
/>
<SelectItem value="" text={t('shipments.allLocations')} />
{renderAddresses}
</Select>
);
}}
</GetShipmentsAddresses>
);
其中VALUE
可以在組件調用中更改為destinationAddress
或originationAddress
。
我怎樣才能做到這一點?
使用模板字符串
const ParentComp = ({ value }) => (
<AddressesSelect
handleAddresses={this.handleChange('shippedFrom')}
VALUE={`${value}Address`} // this is would be VALUE
title={t('shipments.shippedFrom')}
/>)
並在您的組件中將其用作
<SelectItem
value={addresses[value].description}
key={addresses.id}
text={addresses[value].description}
/>
就像點符號一樣,你可以使用address['originatingAddress'] ,在這里你可以用你的值變量替換它
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.