Передавать данные элемента в реагирующий модальный

108
9

У меня есть карта, которая отображает несколько элементов, а одна из ее строк ниже

<a onClick={()=> this.setState({"openDeleteModal":true)}>Delete</a>

Очевидно, что я хочу открыть модальный, когда пользователь нажимает на delete, но мне нужно передать несколько вещей, таких как имя элемента, идентификатор элемента для выполнения удаления. Как я могу передать название модальному?

Я могу связать имя OBJ к как это Удалить a

Я на правильном пути?

спросил(а) 2021-01-25T18:06:45+03:00 4 месяца, 4 недели назад
1
Решение
125

При работе с приложениями React старайтесь не думать о передаче значений другим компонентам, а скорее обновлять состояние, в котором находятся ваши компоненты. В вашем примере, если ваш модальный компонент является дочерним элементом того же компонента, a которому принадлежит ваш список тэгов, вы можете установить значения, которые вы заинтересованы, подвергать модальному состоянию, а также обновить свойство, которое сигнализирует, модальный открыт или нет. Например:

class Container extends React.Component {
constructor(props) {
super(props)
this.state = {
openDeleteModal: false,
activeItemName: '', //state property to hold item name
activeItemId: null, //state property to hold item id
}
}

openModalWithItem(item) {
this.setState({
openDeleteModal: true,
activeItemName: item.name,
activeItemId: item.id
})
}

render() {

let buttonList = this.props.item.map( item => {
return (<button onClick={() => this.openModalWithItem(item)}>{item.name}</button>
});

return (
<div>
{/* Example Modal Component */}
<Modal isOpen={this.state.openDeleteModal}
itemId={this.state.activeItemId}
itemName={this.state.activeItemName}/>
{ buttonList }
</div>
)
}
}

ответил(а) 2021-01-25T18:06:45+03:00 4 месяца, 4 недели назад
45

Было бы неплохо, если бы вы дали немного больше кода, чтобы лучше понять его. Из того, что я понимаю, вы можете создать состояние, называемое "selectedItem", и установить его onClick of a. Затем, подтверждая модальность, вы можете передать необходимые данные из состояния.

ответил(а) 2021-01-25T18:06:45+03:00 4 месяца, 4 недели назад
46

Копирование моего ответа от Как передать реквизит модальной

Аналогичный сценарий

constructor(props) {

super(props)

this.state = {
isModalOpen: false,
modalProduct: undefined,
}
}

//****************************************************************************/

render() {

return (
<h4> Bag </h4>
{this.state.isModalOpen & (
<Modal
modalProduct={this.state.modalProduct}
closeModal={() => this.setState({ isModalOpen: false, modalProduct: undefined})
deleteProduct={ ... }
/>
)

{bag.products.map((product, index) => (
<div key={index}>
<div>{product.name}</div>
<div>£{product.price}</div>
<div>
<span> Quantity:{product.quantity} </span>
<button onClick={() => this.props.incrementQuantity(product, product.quantity += 1)}> + </button>
<button onClick={() => this.decrementQuantity(product)}> - </button> // <----
</div>
</div>
))}
)
}

//****************************************************************************/

decrementQuantity(product) {

if(product.quantity === 1) {
this.setState({ isModalOpen: true, modalProduct: product })
} else {
this.props.decrementQuantity(product)
}
}

ответил(а) 2021-01-25T18:06:45+03:00 4 месяца, 4 недели назад
45

Попробуйте это: это форма, которая имеет кнопку, и является дочерним компонентом некоторого другого компонента, который передает метод handleButtonAction как реквизиты, а кнопка принимает входные данные и вызывает этот метод родительского компонента

handleSubmit = (e) => {
e.preventDefault();
const data = e.target.elements.option.value.trim();
if (!data) {
this.setState(() => ({ error: 'Please type data' }));
} else {
this.props.handleButtonAction(data, date);
}
}

{this.state.error && <p>{this.state.error}</p>}
<form onSubmit={this.handleSubmit}>
<input type="text" name="option"/>
<div>
<button>Get data</button>
</div>
</form>


Родительский компонент:

handleButtonAction = (data) => {

axios.get('http://localhost:3000/someGetMethod/${data}').then(response => {
const resData = response.data;
this.setState({
openModal: true,
status: response.status,
data: resData
});
}).catch((error) => {
if (error.message.toLowerCase() === 'network error') {
this.setStateWithError(-1, {});
}
else { // not found aka 404
this.setStateWithError(error.response.status, '', {currency, date: ddat});
}
});
}

ответил(а) 2021-01-25T18:06:45+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема