将项目数据传递给反应模式

Question

我有一张地图，可以渲染几个项目，其中一条线在下面

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

显然我想在用户单击删除时打开一个模式，但是我必须传递一些东西，比如项目的名称、项目的 ID 来执行删除。如何将名称传递给模态？

我可以像这样将obj名称绑定到a 删除

我走对了吗？

Answer 1

试试这个：这是有按钮的表单，是其他组件的子组件，它通过handleButtonAction方法作为props，按钮接受输入数据并调用这个父组件方法

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});
        }
    });        
}

Answer 2

从How to pass props to a modal复制我的回答

类似的场景

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)
    }
}

Answer 3

在处理 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>
    )
    }
}