React onChange 上的两种方式绑定不起作用

如何解决React onChange 上的两种方式绑定不起作用

在第二个 <Person/> 组件上，我有道具 nameChanged = {this.nameChangeHandler}，其中我使用了双向数据绑定，但它不起作用，我认为我没有遗漏任何东西。
控制台没有错误

<div>
    <p onClick={props.click}>My name is {props.name} and I am {props.age} Year old!</p>
    <p>{props.children}</p>
    <input type="text" onChange={props.changed}/>
</div>

nameChangeHandler = (event) => {
    this.setState = ({
        persons:[
            {name:"Roja",age: 34},{name: event.target.value,age: 35},{name:"Manu",age: 45}
        ]
    })
}

<Person 
    name = {this.state.persons[1].name} 
    age = {this.state.persons[1].age} 
    click={this.switchNameHandler.bind(this,"SammRad")}
    changed={this.nameChangeHandler}>
        My hobbies are Racing
</Person>

App component Person component

解决方法

您需要将 person 组件重命名为 Person，注意大写。而且，我认为即使那样它也不会正确编译，组件看起来很奇怪，所以试试这个。

import React,{ Fragment } from 'react'; 

const Person = (props) => 
<Fragment>
    My name is {props.name} and I am {props.age} Year old!
    {props.children}
</Fragment>

export default Person;

您应该始终将组件的内容包装在父组件中。如果你没有顶级父组件作为包装器，你可以使用 Fragment 代替，它基本上是一个空组件来帮助你在这种情况下并允许 React 编译，它甚至不打印任何东西在 HTML 上。

此外，您应该使用提供此类提示的 IDE，我建议您使用 Visual Studio Code。

希望这对您有所帮助。