[0623]Java Web開発プロセス🌞

bind関数
bind関数を使用すると、指定したオブジェクトに固定されます.
例

class Calc extends React.Component { 
    constructor() {
        super(); // react는 상속을 받으면 부모의 생성자가 자동 호출되지 않으므로 super() 써주기
        this.state = { // state: 예약되어있음, flux 방법론에서 가장 중요한 요소
            x: 10,
            y: 20,
            result: 0
        };
    }

    xInputChange(e) { 
        // (주체는 window객체이겠지만 use strict 모드에서 보안을 위해 this는 undefined가 된다.)
        // arrow function 사용 시 this에 lexical scope 적용됨
        // onChange 사용 시 this로 넘기는 게 없어서 아래 오류 발생
        // this.state.x = 30; // 버그 - 화면이 로드되자마자 해당 값 출력됨, 다른 값으로 바꿀 수 없음

        // 사용자의 입력을 통해 값이 바뀌는 부분은 setState에 정의해주기
        this.setState({ // this가 undefined라는 오류
                 // state에 누적형으로 담기게 하려고 setState 사용
            x: e.target.value // state에 누적형으로 담기게 되고 그것을 화면에서 쓰게 됨
        });
    }

    yInputChange() { // 클래스 작성 시에는 함수 이렇게 만들기
        console.log("y");
    }

    render() {

        const el = <div id="mvc">
                        <label>x:</label>
                        <input type="text" value={this.state.x} onChange={this.xInputChange.bind(this)} dir="rtl" /> 
                        <label>y:</label>
                        <input type="text" value={this.state.y} onChange={(e) => {this.setState({y:e.target.value})}} dir="rtl" />
                        <input className="btn" type="button" value="덧셈"/>
                        <br />
                        <span>x+y:</span>
                        <span>{this.state.result}</span>
                    </div>  
        // 사용자 입력값이 바뀌 경우 onChange 설정해주기
        // onChange에게 this.xInputChange 함수 위임
        // 위: jsx 구문

        return el;
    }
}

// react DOM 사용하기
ReactDOM.render(<Calc />, document.querySelector("#root"));

bindを使用してCalcオブジェクトを渡す

<input type="text" value={this.state.x} onChange={this.xInputChange.bind(this)} dir="rtl" /> 

例1)-加算
1.オブジェクトを取得して値を取得する

class Calc extends React.Component { 
    constructor() {
        super(); // react는 상속을 받으면 부모의 생성자가 자동 호출되지 않으므로 super() 써주기
        this.state = { // state: 예약되어있음, flux 방법론에서 가장 중요한 요소
            x: 10,
            y: 20,
            result: 0
        };
    }

    xInputChange(e) { 
        this.setState({ // this가 undefined라는 오류
                 // state에 누적형으로 담기게 하려고 setState 사용
            x: e.target.value // state에 누적형으로 담기게 되고 그것을 화면에서 쓰게 됨
        });
    }

    btnClick() {
        // 더하기 위해 xInput 객체, yInput 객체 얻어오기
        // 1. 객체를 얻어서 값을 얻기
        let container = document.querySelector("#mvc");
        let inputs = container.querySelectorAll("input");
        let xInput = inputs[0];
        let yInput = inputs[1];
        let result = parseInt(xInput.value) + parseInt(yInput.value);
        // 속성과 값이 같을 경우 생략 가능
        this.setState({result/*:result*/});
    }

		render() {
		        // 계산기 컴포넌트
		        // this.xInputChange의 이름을 onChange로 해준 것
		        const el = <div id="mvc">
		                        <label>x:</label>
		                        <input ref="xInput" type="text" value={this.state.x} onChange={this.xInputChange.bind(this)} dir="rtl" /> 
		                        <label>y:</label>
		                        <input ref="yInput" type="text" value={this.state.y} onChange={(e) => {this.setState({y: e.target.value})}} dir="rtl" />
		                        <input className="btn" type="button" value="덧셈" onClick={this.btnClick.bind(this)}/>
		                        <br />
		                        <span>x+y:</span>
		                        <span ref="resultInput">{this.state.result}</span>
		                    </div>  
		        // 사용자 입력값이 바뀌 경우 onChange 설정해주기
		        // onChange에게 this.xInputChange 함수 위임
		        // 위: jsx 구문
		
		        return el;
    }
}

// react DOM 사용하기
ReactDOM.render(<Calc />, document.querySelector("#root"));

2.応答でオブジェクトを取得し、値を取得

btnClick() {
 	let x = parseInt(this.refs.xInput.value);
        let y = parseInt(this.refs.yInput.value);
        let result = x+y;
        this.setState({result});       
}

render() {
        // 계산기 컴포넌트
        // this.xInputChange의 이름을 onChange로 해준 것
        const el = <div id="mvc">
                        <label>x:</label>
                        <input ref="xInput" type="text" value={this.state.x} onChange={this.xInputChange.bind(this)} dir="rtl" /> 
                        <label>y:</label>
                        <input ref="yInput" type="text" value={this.state.y} onChange={(e) => {this.setState({y: e.target.value})}} dir="rtl" />
                        <input className="btn" type="button" value="덧셈" onClick={this.btnClick.bind(this)}/>
                        <br />
                        <span>x+y:</span>
                        <span ref="resultInput">{this.state.result}</span>
                    </div>  
        // 사용자 입력값이 바뀔 경우 onChange 설정해주기
        // onChange에게 this.xInputChange 함수 위임

        return el;
}

3.使用状態

btnClick() {
    let x = parseInt(this.state.x); // 최종적으로 바뀐 state가 오게 됨
    let y = parseInt(this.state.y);
    let result = x + y;
    this.setState({result});     
}

render() {
        // 계산기 컴포넌트
        // this.xInputChange의 이름을 onChange로 해준 것
        const el = <div id="mvc">
                        <label>x:</label>
                        <input ref="xInput" type="text" value={this.state.x} onChange={this.xInputChange.bind(this)} dir="rtl" /> 
                        <label>y:</label>
                        <input ref="yInput" type="text" value={this.state.y} onChange={(e) => {this.setState({y: e.target.value})}} dir="rtl" />
                        <input className="btn" type="button" value="덧셈" onClick={this.btnClick.bind(this)}/>
                        <br />
                        <span>x+y:</span>
                        <span ref="resultInput">{this.state.result}</span>
                    </div>  
        // 사용자 입력값이 바뀔 경우 onChange 설정해주기
        // onChange에게 this.xInputChange 함수 위임

        return el;
}

例2)-スタイルの変更

// state 기반의 프로그래밍을 이해하고 있는지
// react에서 style을 처리하는 방법
class Photo extends React.Component { 
    constructor() {
        super(); 
        this.state = { 
            width: "300px",
            borderWidth: "5px",
            borderColor: "rgb(252, 198, 194)",
            borderStyle: "solid"
        };
    }

    render() { 
        // 옆으로 길어지는 객체의 변수를 따로 두자
        let imgStyle = {width: this.state.width, height: "400px", 
                        borderWidth: this.state.borderWidth,
                        borderColor: this.state.borderColor, 
                        borderStyle: this.state.borderStyle
                    };

        return <section>
                    <div>
                        <label>너비: </label>
                        <input type="text" value={this.state.width} onChange={(e) => {this.setState({width: e.target.value})}}/>
                        <label>경계선 색상:</label>
                        <input type="text" value={this.state.borderColor} onChange={(e) => {this.setState({borderColor: e.target.value})}}/>
                        <label>경계선 두께:</label>
                        <input type="text" value={this.state.borderWidth} onChange={(e) => {this.setState({borderWidth: e.target.value})}}/>
                    </div>
                    <div>
                        <img src="hera.jpg" style={imgStyle}></img>
                    </div>
                </section>;
    }
}

// react DOM 사용하기
ReactDOM.render(<Photo />, document.querySelector("#root"));

🐥 の最後の部分
独立書店地図サービスが盛んに行われており、ブログには当日授業を受けた例題コードだけが残されており、残念ながら目の敵です.
しかし、プロジェクトをするときは、私の文章で私の気持ちと解決の間違いを書き直さなければならないと思います.この点は非常に重要です.だからどんなに忙しくても、必ず少し時間を割いて、プロジェクトの進行中に発生したエラーを記録して、私たちのグループのメンバーや他のグループのメンバーの助けの下で解決する方法です.
コメントサイト
this-thisバインド編(bind、call、apply)