reactjs - 将数据从 Child 发送到 Parent React

Question

我已经细分了我的组件，我想使用子组件中的 deleteName 函数来更改文本的状态。但是，我onPress={this.props.delete(i)}在我的子组件中使用了它不起作用。发生在我身上的错误是：

未定义的变量“I”

这是我的代码：

应用程序.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>
);

标签： reactjsreact-nativereact-native-android

Answer 1

而不是onPress={this.props.delete(i)}，使用onPress={() => this.props.delete(i)}