Как отобразить значения из двух разных массивов на одной карте? - PullRequest
Новая
       36

Как отобразить значения из двух разных массивов на одной карте?

0 голосов
/ 24 апреля 2020

Компонент. Я пытаюсь получить значение filterAttributeKeys в первом TextField, но я не уверен, как это сделать на той же карте, которая проходит через filterAttributeValues

Причина, по которой мне нужно это быть внутри той же карты, потому что там будет кнопка добавления и удаления для добавления и удаления дополнительных полей ключа и значения 


const someComponent = (props: SearchProps) => {

    const [state, setState] = useState({ attributes: [], filterAttributeValues: [{index: 0, key: '', value: ''}], 
                          filterAttributeKeys: [{index: 0, key: '', value: ''}]})

    const handleAttributeValueChange = (index: number, event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
        const tempAttributeValues = [...state.filterAttributeValues];
        const nativeEvent: any = event.nativeEvent;
        if (nativeEvent.target.tagName && nativeEvent.target.tagName === 'LI') {
            tempAttributeValues[index] = {index: index, key: nativeEvent.target.dataset.value, value: updateAttributeValue.value};
        }
        if (nativeEvent.target.type && nativeEvent.target.type === 'text') {
            tempAttributeValues[index] = {index: index, key: updateAttributeValue.key, value: nativeEvent.target.value};
        }
        setState({...state, filterAttributeValues: tempAttributeValues});
    }

    // The handle for Key is the same as Value, omitting for less bloat

Ниже приведен jsx, сейчас у меня просто att.value в значении, но я хочу, чтобы он показывал значение массива filterAttributeKeys, а не другого массива 

    return props.show ? ReactDOM.createPortal((
        <div>
            <div style={{ height: '20px' }} />
                <div>
                    {state.showSearchCriteria ? (
                    <React.Fragment>
                        <p style={{margin: '5px'}}>Attributes</p>
                        <div style={{ display: "flex", flexDirection: "row", flexWrap: "wrap"}}>
                            {state.filterAttributeValues.map((att, i) => {
                                return (
                                <div key={i}>
                                    <TextField label="Attribute" value={att.value}  onChange={(event)=>handleAttributeKeyChange(i, event)}/>
                                    <TextField label="Value" value={att.value} onChange={(event)=>handleAttributeValueChange(i, event)}/>
                                </div>
                            )})}
                        </div>
                        </div>
                    </React.Fragment>
                    ) : null}
                    </div>
        </div>
    ), document.querySelector('#modal') as Element) : null;
}

Я мог бы просто создать отдельную карту для другого массива, но я не уверен, как удалить оба TextField когда я нажимаю кнопку удаления, которая также удаляет на основе key={i}

...