反应：单击列表中的项目并打印出其当前状态

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> 
      ) 
     }) 
    ) 
}