Question

我已经细分了组件，我想使用子组件中的deleteName函数更改文本状态。但是，我在子组件中使用了onPress={this.props.delete(i)}，该子组件无法正常工作。对我来说发生的错误是：

未定义变量“ I”

这是我的代码：

App.js

export default class App extends Component {
  state = {
    placeName: '',
    text: [],
  }

  changeName = (value) => {
    this.setState({
      placeName: value
    })
  }

  deleteName = (index) => {
    this.setState(prevState => {
      return {
        text: prevState.text.filter((place, i) => {
          return i!== index
        })
      }
    }
  }

  addText = () => {
    if (this.state.placeName.trim === "") {
      return;
    } else {
      this.setState(prevState => {
        return {
          text: prevState.text.concat(prevState.placeName)
        };
      })
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>
          <Input changeName={this.changeName} 
            value={this.state.placeName} />
          <Button title="Send" style={styles.inputButton}
            onPress={this.addText} />
        </View>
        <ListItems text={this.state.text} delete={this.deleteName}/>
          {/* <View style={styles.listContainer}>{Display}</View> */}
      </View>
    );
  }
}

和子组件ListItems.js

const ListItems = (props) => (
  <View style={styles.listitems}>
    <Text>{this.props.text.map((placeOutput, i) => {
      return (
      <TouchableWithoutFeedback
        key={i}
        onPress={this.props.delete(i)}>                                                        
        onPress={this.props.delete}
        <ListItems placeName={placeOutput}/>
      </TouchableWithoutFeedback>
      )
    })}
    </Text>
  </View>
);

Answer 1

使用grid-view代替onPress={this.props.delete(i)}

Answer 2

为了获得更简洁的代码，您可以使用renderContent并使用error.request进行映射，如下所示。另外，您还需要使用error.response代替}, this);来使用()=>this.props.delete(i)。

this.props.delete(i)

然后在JSX的onPress内部使用以下代码进行调用：

renderContent=(that)=>{
 return props.text.map((placeOutput ,i) => {

        return (

       <TouchableWithoutFeedback key={i} onPress={()=>this.props.delete(i)}>                                                        
       onPress={this.props.delete}

       </TouchableWithoutFeedback>

      );
    }, this);
  }
}

完成！我希望我能帮助：）

Answer 3

您需要在将道具传递给孩子时绑定索引值。

delete = index => ev => {
  // Delete logic here
}

在渲染功能中，您可以将其作为

传递

items.map((item, index) => {
  <ChildComponent key={index} delete={this.delete(index)} />
})

在您的子组件中，您可以将此道具用作

<button onClick={this.props.delete}>Click me</button>

我创建了一个Sandbox link供您参考

将数据从子级发送到父级React

3 个答案: