Question

我正在尝试将值传递给父组件，但是我正在获取对象格式而不是值。这是我的工作

子组件

render() {
  return (
    this.props.data.map((val, idx) => {
      // do someting with val

      <Button onClick={this.props.action(0)}> pass to parent </Button>}
    )
  )
}

父组件

action(val) {
  alert(val)
}

render() {
  return (
    <Child data={this.state.data} action={(val) => this.action(val)}
  )
}

我希望收到诸如2或3之类的确切值，但相反，我得到的是对象对象警报。我想念什么？

Console.log（）结果：

Class {dispatchConfig: {…}, _targetInst: FiberNode, _dispatchListeners: ƒ, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, …}altKey: (...)bubbles: (...)button: (...)buttons: (...)cancelable: (...)clientX: (...)clientY: (...)ctrlKey: (...)currentTarget: (...)defaultPrevented: (...)detail: (...)dispatchConfig: nulleventPhase: (...)getModifierState: (...)isDefaultPrevented: (...)isPropagationStopped: (...)isTrusted: (...)metaKey: (...)movementX: (...)movementY: (...)nativeEvent: (...)pageX: (...)pageY: (...)relatedTarget: (...)screenX: (...)screenY: (...)shiftKey: (...)target: (...)timeStamp: (...)type: (...)view: (...)_dispatchInstances: null_dispatchListeners: null_targetInst: nullpreventDefault: (...)stopPropagation: (...)get altKey: ƒ ()set altKey: ƒ (val)get bubbles: ƒ ()set bubbles: ƒ (val)get button: ƒ ()set button: ƒ (val)get buttons: ƒ ()set buttons: ƒ (val)get cancelable: ƒ ()set cancelable: ƒ (val)get clientX: ƒ ()set clientX: ƒ (val)get clientY: ƒ ()set clientY: ƒ (val)get ctrlKey: ƒ ()set ctrlKey: ƒ (val)get currentTarget: ƒ ()set currentTarget: ƒ (val)get defaultPrevented: ƒ ()set defaultPrevented: ƒ (val)get detail: ƒ ()set detail: ƒ (val)get eventPhase: ƒ ()set eventPhase: ƒ (val)get getModifierState: ƒ ()set getModifierState: ƒ (val)get isDefaultPrevented: ƒ ()set isDefaultPrevented: ƒ (val)get isPropagationStopped: ƒ ()set isPropagationStopped: ƒ (val)get isTrusted: ƒ ()set isTrusted: ƒ (val)get metaKey: ƒ ()set metaKey: ƒ (val)get movementX: ƒ ()set movementX: ƒ (val)get movementY: ƒ ()set movementY: ƒ (val)get nativeEvent: ƒ ()set nativeEvent: ƒ (val)get pageX: ƒ ()set pageX: ƒ (val)get pageY: ƒ ()set pageY: ƒ (val)get relatedTarget: ƒ ()set relatedTarget: ƒ (val)get screenX: ƒ ()set screenX: ƒ (val)get screenY: ƒ ()set screenY: ƒ (val)get shiftKey: ƒ ()set shiftKey: ƒ (val)get target: ƒ ()set target: ƒ (val)get timeStamp: ƒ ()set timeStamp: ƒ (val)get type: ƒ ()set type: ƒ (val)get view: ƒ ()set view: ƒ (val)get preventDefault: ƒ ()set preventDefault: ƒ (val)get stopPropagation: ƒ ()set stopPropagation: ƒ (val)__proto__: Class

Answer 1

尝试：

onClick={() => this.props.action(val)}>

目前正在render而不是click上调用该函数。

Answer 2

您正在执行回调，而不是创建新的回调。应该是：

<Button onClick={() => this.props.action(val)}> pass to parent </Button>

Answer 3

根据您对上述答案的评论，我猜想this.props.data是一个对象数组。在返回Button的地图中，您需要访问对象中包含值的属性，即onClick={() => this.props.action(val.value)}>

此外，此代码还使用花括号在地图中打开该函数，并通过括号将其关闭：

    this.props.data.map((val, idx) => {
      // do someting with val
      <Button onClick={this.props.action(val.value)}> pass to parent </Button>
    )

如果使用括号，则需要在return之前添加<Button />

Answer 4

您正在传递这样的值： onPress={(item) => function(item)}

尝试像这样传递值：onPress={() => function(item)}

价值传递给作为对象的父母

4 个答案: