Question

我是一个非常新的反应者，它通过将父组件中的功能作为 props 传递给子组件，来进行从子组件向父组件的数据发送。当我将字符串作为函数参数传递时，它可以正常工作，但是当我将 this.state 作为函数参数传递给父组件时，它将记录空对象。

这是App.js（父）组件的代码

class App extends Component {
  onClick = (vals) =>{
   console.log(`${"App Components"} ${vals}`)
     }
  render() {


    return (
      <div className="App">
        <Form fetchValue={(vals) => this.onClick(vals)}>
        </Form>
      </div>
    );
  }
}

这是我在Form.js（子级）组件中以 props 访问的功能，只要调用“ onClickButton”

import React, { Component } from 'react'

class Form extends Component {
    constructor(props) {
        super(props)

        this.state = {
            user : "Enter User Name",
            password: "Enter Your Password",
            email: "enter your e-mail"
        }
    }

    onUserValueChnage = (e) => {
        this.setState({
          user: e.target.value
        })
    }

    onPassValueChnage = (e) => {
        this.setState({
            password: e.target.value
        })
    }

    onEValueChnage = (e) => {
        this.setState({
            email: e.target.value
        }) 
    }

    onClickButton = (e) => {
        console.log(this.state)
        this.props.on(this.state)
        e.preventDefault()
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onClickButton}>
                    <input type="text" value={this.state.user} onChange= {this.onUserValueChnage} />
                    <input type="password" value={this.state.password} onChange={this.onPassValueChnage}/>
                    <input type="text" value={this.state.email} onChange={this.onEValueChnage}/>
                    <button>Submit</button>
                </form>  
            </div>         
        )
    }
}

export default Form

我已将 this.state 作为参数传递给App Component，它记录了空对象。

我要问的问题是，是否可以将对象作为函数参数传递给父组件？

Answer 1

您遇到的问题似乎是由于子组件中的onClickButton造成的。您正在呼叫this.props.on。但是，您从父组件的render函数传入的函数称为fetchValue。相反，应该在子组件的onClickButton中调用this.props.fetchValue。通过状态时，我还将执行传播操作。开辟直接改变状态的潜力很不好。

onClickButton = (e) => {
  console.log(this.state)
  this.props.fetchValue({ ...this.state})
  e.preventDefault()
 }

（可选）您还可以更改父组件以直接引用该函数的引用，而不是匿名函数。

<Form fetchValue={this.onClick} />

更新后的答案：

如果要查看自己的价值，则需要将其更改为此。当您进行字符串插值并尝试打印对象时，由于它不是字符串，它将输出[object, object]。如果希望在进行字符串插值时将变量以字符串形式输出，则需要用JSON.stringify(value)包装变量。但是，您也可以将onClick组件中的App更新为类似的内容，并且它应该按照您的期望打印对象。

onClick = (value) =>{
  console.log(value)
}

Answer 2

在您的父母中：

const onChildClicked = name => console.log(name)

return <Child onClickChild={onChildClicked} />

在Child中：

return <div id='hey' onClick={e => props.onChildClicked(e.target)}

您的控制台应显示：hey

是否可以使用函数参数将“ this.state”对象从子级传递到父级组件？

2 个答案: