×
  • 反应–完整指南(包括React Router 4& Redux)

  • 23 –保持列表状态反应

    Lesson List
    [在反应中保持列表状态,维持反应中的列表状态]

    在最后一课中,我们通过将数组映射到具有JSC元素的数组中,开始输出列表,这是输出反应中的列表的常见模式。您只需使用JavaScript,因为一切都是JavaScript。
    现在我们仍然有一些改进的东西:

    will come back to that soon before i do that let’s see how we actually manipulate the Persons array and for that let me add a new click listener.
    Inside our person components there we actually already have a click listener on the first paragraph and there we have execute the click prompt, prior to our change there we then call the switchNameHandler in src / app.js.

    列出反应的状态

    Now we will remove that method I am not calling it anymore from anywhere in my application instead I want to add a new handler i’ll name it deletePersonHandler and you might be able to guess what this will do. I want to delete a person from my array of persons and I want to execute this and we will ececute this wheen we click the first paragraph in a person component.

    src / person / person.js
    
    import React 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>
    			 ...
    		</div>
    	);
    };
    export default person;
    

    因此,只要有一个单击道具被执行为方法。所以我应该为我的人组成的点击道具添加点击道具 src / app.js. referencing to the deletePersonHandler.

    src / person / person.js
    
    ...
    deletePersonHandler = () => {};
    render() {
    	let persons = null;
    	if (this.state.showPersons) {
    		persons = (
    			<div>
    				{this.state.persons.map(person => {
    					return <Person click={this.deletePersonHandler} name={person.name} age={person.age} />;
    				})}
    			</div>
    		);
    	}
      ...
    }
    ...
    

    now when I click the person I want to execute deletePersonHandler method and I want to delete that perticular person. For that I need to know which person is this, since since we output a dynamic list there.
    The good thing is the map method also exposes a second argument. I can can receive an second argument the 指数 in the array.

    JS地图方法
    
    [1,2,3].map((item, index) => { console.log(`${index})  ${item}`) });
    
    笔记:
    如果您在ES6箭头函数中使用更多的一个参数,那么您必须将SRguments包装在括号中I.`()`

    所以我们将该索引自动释放,我想将其传递给 deletePersonHandler

    src / app.js.
    
    ...
    {
      this.state.persons.map((person, index) => {
    		return (
    			<Person click={() => this.deletePersonHandler(index)} name={person.name} age={person.age} />
    		);
    	})
    }
    ...
    

    我将使用我在上面看到的箭头函数时执行的sydtex,然后我能够通过索引。
    so now we can receive this in a deletePersonHandler method.

    src / app.js.
    
    ...
    deletePersonHandler = personIndex => {
      const persons = this.state.persons;
      persons.splice(personIndex, 1);
      ...
    };
    ...
    

    the splice() removes one element from the array of the given index. then after I can call this.setState() and set the persons object

    src / app.js.
    
    ...
    deletePersonHandler = personIndex => {
      const persons = this.state.persons;
      persons.splice(personIndex, 1);
      this.setState({persons:persons});
    };
    ...
    

    因此,通过这一点,我们将人员的状态设置为新人更新的人,这种方法有一个缺陷,我很快就会解决。
    让我们尝试保存文件并运行应用程序,直到现在我们之前仍然会得到相同的警告。
    点击段落确保我们实现的功能运行良好。然而,我说该方法有一个缺陷,我将深入进入下一个课程的缺陷。

    React introduction
    React Component
    保持列表状态反应
  • 启用通知    好的 不,谢谢