React：点击列表中的项目并打印出其当前状态

Question

我正在映射状态中的对象列表并创建列表。

但是，我想添加一些功能，以便我可以更改列表中某个项目的状态。

在下面的代码中，我有一个名为handleEdit(e)的辅助函数。在这个功能中，我想打印出它的状态。 IE - {name:'Eric', update: false}

我应该在那里实现这一目标？

function AddPerson(props) {
    return(
        <div>
            <input type="text" value= {props.newPerson} onChange = {props.handleUpdate}/>
            <button type="submit" onClick= {props.addNewFriend}> Add New </button>
        </div>
    ) 
}

function Person(props) {
    console.log(props.handleEdit)
    return (
        props.listOfPeople.map((person, i) => {
            return(
                <li key={i} onClick = {props.handleEdit}>{person['name']}</li>
            ) 
        })
    )
}

function ListPeople(props) {
    return(
        <div>
            <ul>
                <Person listOfPeople = {props.people} handleEdit = {props.edit}/>
            </ul>
        </div>
    )
}

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            newPerson: '',
            people: [{name:'Eric', update: false} , {name:'Rick', update:false}, {name:'Yoni', update:false}]
        };

        this.handleUpdate = this.handleUpdate.bind(this)
        this.addNewFriend = this.addNewFriend.bind(this)
        this.handleEdit = this.handleEdit.bind(this)
    }

    handleUpdate(e) {
        this.setState({newPerson: e.target.value})
    }

    addNewFriend(){
        console.log(this.state.newPerson)
        const newFriendList = this.state.people.slice()
        this.setState(
            {
                newPerson: '',
                people: newFriendList.concat({name:this.state.newPerson, update:false})
            }
        )
    }

    handleEdit(e) {
        console.log(e.target.value)
        return null

    }


    render() {
        return (
            <div>
                <AddPerson handleUpdate = {this.handleUpdate} addNewFriend = {this.addNewFriend} newPerson = {this.state.newPerson} />
                <ListPeople people = {this.state.people} edit={this.handleEdit} />
            </div>
        );
    }
}

Answer 1

在Person组件列表中，传递onClick处理程序，如下所示

props.listOfPeople.map((person, i) => {
            return(
                <li key={i} onClick = {(e) => {props.handleEdit(e,person)}}>{person['name']}</li>
            ) 
        })

然后在handleEdit中，第二个参数是您想要的person值

handleEdit(e, person) {
        console.log(person)
        return null

    }

Answer 2

将此行<Person listOfPeople = {props.people} handleEdit = {props.edit}/>替换为<Person listOfPeople = {props.people} handleEdit = {props.edit.bind(this, this.state)}/>

并将方法更改为

handleEdit(state) {
        console.log(state);
        return null

    }

Answer 3

要获取祖父母组件上的数据，您可以将其传递给函数本身。

示例

// change your function to get person object with the event object together
handleEdit(event, person) {
    console.log(event.target.value);
    console.log(person);
    return null

}

// In your Person component pass the event and person objects to the function
function Person(props) {
    console.log(props.handleEdit)
    return (
        props.listOfPeople.map((person, i) => {
            return(
                <li key={i} onClick={(event) => props.handleEdit(event, person)}>
                  {person['name']}
                </li>
            ) 
        })
    )
}