Question

我在使用React时遇到问题。我的父组件：

class RoomPrice extends React.Component {

  constructor(props){
    super(props)

    this.state = {
      room: this.props.room,
      prices: []
    };
    this.handleDeletePrice = this.handleDeletePrice.bind(this);

  }
  handleDeletePrice(price_index){
    let prices = this.state.prices;
    prices.splice(price_index, 1);
    this.setState({prices: prices});
  }

  listPrices(){
    console.log(this.state.prices)
    return this.state.prices.map((item, index) => {
      return (
        <AdditionalPrice
          key={index}
          price={item}
          index={index}
          handleDeletePrice={this.handleDeletePrice}
        />
        )
      });
  }
  renderBasePrice(){
    return(
      <div id="list_prices">
          { this.listPrices() }
      </div>
    )
  }

  render(){
    return(
      <div>
        {this.renderBasePrice()}
      </div>
    )
  }
}

我的孩子部分

class AdditionalPrice extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      price: this.props.price
    }
    this.handleKeyChange = this.handleKeyChange.bind(this);
    this.handleValueChange = this.handleValueChange.bind(this);
    this.handleDeletePrice = this.handleDeletePrice.bind(this);
  }
  componentWillReceiveProps(nextProps){
    this.setState({price: nextProps.price})
  }

  handleKeyChange(event){
    let price = this.state.price;
    price.key = event.target.value
    this.setState({price: price})
  }

  handleValueChange(event){
    let price = this.state.price;
    price.value = event.target.value
    this.setState({price: price})
  }

  handleDeletePrice(){
    this.props.handleDeletePrice(this.props.index);
  }

  renderForm(){
    let key = this.state.price.key;
    let value = this.state.price.value;
    return(
      <div className="form-row">
        <div className="col-5">
          <input type="text" className="form-control" placeholder="Key" onChange={this.handleKeyChange} required/>
        </div>
        <div className="col-5">
          <input type="number" className="form-control" placeholder="Value" onChange={this.handleValueChange} required/>
        </div>
        <div className="col-2">
          <button className="btn btn-warning" type="button" onClick={this.handleDeletePrice}>
            <i className="material-icons">delete_forever</i>
          </button>
        </div>
        <input type="hidden" className="form-control" name={"base_price["+key+"]"} value={value} />
      </div>
    )
  }

  render() {
    return(
      <div>
        {this.renderForm()}
      </div>
    )
  }

}

我尝试删除一个包含在子项中的项目，但它总是删除最后一个元素。我认为索引有问题我要删除特定元素，它总是从渲染列表数组中删除最后一个元素。

请帮助我解决此问题

Answer 1

尝试执行此操作。

then

修改

还有这个：

handleAddNewPrice(){
  const { prices } = this.state;
  let new_price = {"key": "", "value": ""}
  this.setState({ prices: [...prices, new_price] })
}

Answer 2

问题出在您的props中。 props.index会被接收一次，因此，如果要使删除功能正常工作，则需要使用props.index作为price之类的状态。这是您需要在AdditionalPrice组件中更改的示例代码：

this.state = {
  price: this.props.price,
  index: this.props.index
}

componentWillReceiveProps(nextProps){
   this.setState({
       price: nextProps.price,
       index: nextProps.index
   })
}

handleDeletePrice(){
    this.props.handleDeletePrice(this.state.index);
}

Answer 3

我发现了问题我在子组件中的字段未设置值。见下文

 <input type="text" className="form-control" placeholder="Key" value={key} onChange={this.handleKeyChange} required/>

谢谢

前端只删除数组中的最后一项

3 个答案: