反應：單擊列表中的項目並打印出其當前狀態

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