×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 26 –最后的弹性列表组件

    课程清单
    [灵活列表末尾,灵活列表末尾]

    现在,我们添加了许多功能,并了解了 , let’s find out you in our application bit more because in persons component we still have that input where we have to onChange handler where we try toexecute changed prop and also get a value as an input.

    src / Person / Person.js
    
    import 反应from 'react';
    import './Person.css';
    const person = props => {
    	return (
    		<div className="Person">
    			<p onClick={props.click}> {/* on click will execute the deletePersonHandler method */}
    				I am a {props.name} and i am {props.age} year old!
    			</p>
    			<p> {props.children} </p>
    			<input type="text" onChange={props.changed} value={props.name} />
    		</div>
    	);
    };
    export 默认 person;
    

    现在,我们呈现了一个列表并具有真正的动态内容,我们终于可以以一种真正的动态方式进行设置。
    因此,我们需要做的就是简单地提供指向某些事件侦听器或正确更新状态的方法的这些更改。


    所以在 App.js we will add changed and that will point to the method, we got the nameChangeHandler method, so let’s simply use that method.
    in name nameChangeHandler we will need to arguments i.e. event value to change name and ID of the user to be updated

    src / App.js
    
    ...
    nameChangeHandler = (event, id) => { // will now accepts two parameters
      // ...
    }
    ...
    

    And in render() methos will also pass the arguments

    src / App.js
    
    ...
    return (
      <Person
        click={() => this.deletePersonHandler(index)}
        name={person.name}
        age={person.age}
        键={person.id}
        changed={event => this.nameChangedHandler(event, person.id)}
      />
    );
    ...
    

    And with that we can now use that information in the nameChangeHandler.
    我们要更新状态,但当然仅要更新输入字段的人。

    So we need to find that person, We can do this by reaching out to that this.state.persons calling .findIndex() method to find element in array but then get the index of the element.

    src / App.js
    
    ...
    nameChangeHandler = (event, id) => {
      const personIndex = this.state.persons.findIndex( p => p.id === id) // will return Index of the matched ID
      ...
    }
    ...
    

    Then will access to that element by using that matched ID that we got by using findIndex() method.

    src / App.js
    
    ...
    nameChangeHandler = (event, id) => {
      const personIndex = this.state.persons.findIndex( p => p.id === id);
      const person = { ...this.state.persons[personIndex] };   // Morden approach to copy the object
    }
    ...
    

    然后,我们当然要更新人员名称,并且可以这样做,因为我们得到了副本,所以我不是在操纵原始对象
    我可以将其设置为 event.target.value

    src / App.js
    
    ...
    nameChangeHandler = (event, id) => {
      const personIndex = this.state.persons.findIndex( p => p.id === id);
      const person = { ...this.state.persons[personIndex] };
      person.name = event.target.value;    // Set event value to bind name
    }
    ...
    

    现在我需要更新数组,就像在我现在可以让我的人了解整个数组一样,我们必须传播运算符。因为我们一直在处理副本。

    src / App.js
    
    ...
    nameChangeHandler = (event, id) => {
      const personIndex = this.state.persons.findIndex( p => p.id === id);
      const person = { ...this.state.persons[personIndex] };
      person.name = event.target.value;
      const persons = [...this.state.persons]
    	persons[personIndex] = person;
      this.setState({persons: persons})
    }
    ...
    

    我们得到了一个更新的数组,并且有setState方法将更新旧的数组。您可能会感觉到很多代码,但是这是在不改变状态的情况下以最有效的方式完成代码的最佳方法。

    现在保存并运行代码,您将不会在控制台上发现任何错误,并且在输入字段的更新上,它将更新您输入的名称。

    反应introduction
    反应Component
    灵活列表组件到底
  • 启用通知    不用了,谢谢