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

Question

在第二个 <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

Answer 1

您需要将 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。

希望这对您有所帮助。

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

Two way binding on React onChange is not working

javascript

reactjs

onchange

two-way-binding