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

  • 15 –操纵国家

    课程清单

    In the last lesson, we execuated the switchNameHandler upon a click, Now we want to操纵国家 up on the click.

    操纵国家

    现在将注释掉我们实施的警报方法,我们可以简单地使用 this.state.persons

    src / App.js
    
    ...
    class App extends Component {
    	state = {
    		persons: [{ name: 'Lucy', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
    	};
    
    	switchNameHandler = () => {
    		 // alert('called');
    		 this.state.persons[0].name = 'Lucy stifert' // its  a wrong way : Dont do this
    	};
    	render() {
    		return (
    		 ...
    		);
    	}
    }
    export 默认 App;
    

    on click event we will change te name of the firts element from the array i.e. this.state.persons[0].nameafter that save the code then see what happes if we execuate the code…
    单击它不会改变任何内容,我们将看到名称 露西 as it is. instade of that we have to use the 反应method this.setState extend by a Component class and that is made available by the react library.
    The Component object happens to have a steState() method. this is a method which allows us to update the state property and it will then ensure that react gets to know about the update and then updates the DOM.
    setState({}) 将一个对象作为参数,它将把我们在那里找到的任何东西与现有状态合并。

    src / App.js
    
    	import React, { Component } from 'react';
    	import './App.css';
    	import Person from './Person/Person';
    	class App extends Component {
    		state = {
    			persons: [{ name: 'Lucy', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
    			someOtherState: 'dummy Data'
    		};
    
    		switchNameHandler = () => {
    			this.setState({
    				persons: [{ name: 'Lucy Stifert', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
    			});
    		};
    		render() {
    			return (
    				<div className="App">
    					<h1> Heading</h1>
    					<button onClick={this.switchNameHandler}>Switch Name</button>
    					<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
    					<Person name={this.state.persons[1].name} age={this.state.persons[1].age} />
    					<Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
    					{/* goes on */}
    				</div>
    			);
    		}
    	}
    	export 默认 App;
    

    In the setState() we will pass our person object in which we will just change our first name only … and other will remain as it is. It will not change the other elements outside the person array.
    The react will see our state and it will check which part is overriding, we are changing persons. it will not discard other states but it will simply merge the old state with the new one and it will override. it will override the persons since we have defined a new version of persons in the setState.
    So with that see what happens if we save file and execute our code. on the button click the data will be revised by the new version of persons object.
    If you see the changes i.e DOM was updated because 反应recognized that the state of our application changes and that really is a special thing. There are many things which leads react to update the DOM. There actually are two changing state and what else you could already see it in action Props.


    We change state that nice but keep in mind what we actually output for each person is defined in that Person component and there we don’t use state and as i said we can use it in Persons Component because this uses the function syntax.
    In Persons component we use props and that the other thing that Reacts watches out for. If state changes or props changes, it analyzes to code it already rendered to DOM and the code it would now render if it were to re-render for everything and then it updates the existing DOM in all the places where it needs to update ut, to reflect your new state and props new state n App.js和新道具 Persons.js.

    反应introduction
    反应Component
    操纵国家
  • 启用通知    不用了,谢谢