코드를 반복하지 마십시오...

React에서는 코드의 다른 곳과 마찬가지로 꼭 필요한 경우가 아니면 절대 반복해서는 안 됩니다(거의 절대 안 됨).

아마도 당신이 읽을 내용은 쉽지만 온라인에서 일부 코드를 읽고 주제를 다루는 것에 대해 생각했습니다. 진부함에 대해 전문가에게 "사과"합니다.

예시...

우리는 텍스트 입력 태그를 관리해야 하고 사용자가 입력한 값을 기억하고 다시 변경될 때까지 어딘가에 표시해야 합니다!

React에서 어떻게 할까요?

구성 요소의 onChange를 마지막 입력 값으로 업데이트하는 state를 삽입한 다음 state의 값을 입력 태그 또는 페이지의 다른 태그에 전달하여 표시합니다. 마지막 입력값.

코드에!

//we've a class... with a state defined

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      myFirstState:"Labrador"
    }

//we're going to manage the changes, and setState() equal to the user input

   valueChange = (e) => {
      this.setState({myFirstState : e.target.value});
    }

//rendering time...we've an Input tag, with the state as value 
//and the function, calling to onChange

render() {
    return (
        <div className="just a class">
          <input placeholder="insertValue" value={this.state.myFirstState} 
                 onChange= {this.valueChange(e)}/>
        </div>
       )
   }
}

기본적인 내용입니다.
그리고 그것은 그것을 위해가는 방법 일뿐입니다.

하지만 둘 이상<input>이 있는 경우에는 어떻게 해야 합니까?
둘도 아니고... 셋도 아니고... 같은 일을 하는 열 명<input>이 넘는다고?
(포스트에 도움이 되는 과장입니다)
handleChange 함수에서 볼 수 있듯이 It's setState()의 특정 상태를 변경합니다. 다른 함수<input>에 동일한 함수를 사용하면 매번 myFirstState의 값을 변경하게 됩니다.
(그리고 저를 믿으세요... 저는 사람들이 이와 같은 동일한 작업을 수행하는 수많은 기능을 사용하는 것을 보았습니다.)

내 생각은...

//we've a class... with a more states defined

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      myFirstState:"Labrador",
      mySecondState:"Akita"
    }

//we're going to manage the changes, and setState() equal 
//to the user input... for all the possible "keys" in the state object

      valueChange = (key) => {
        return function (e) {
          var obj= {};
          state[key] : e.target.value;
          this.setState(obj);
        }.bind(this);
       }

//rendering time...we've more Input tags, with the states as values and one
//function, calling onChange... we're passing the "key" as argument.

render() {
    return (
        <div className="just a class">
          <input placeholder="insertValue" value={this.state.myFirstState} 
                 onChange= {this.valueChange("myFirstState")}/>
          <input placeholder="insertValue" value={this.state.mySecondState} 
                 onChange= {this.valueChange("mySecondState")}/>
        </div>
       )
   }
}

이를 통해 setState()가 변경하려는 상태이고 값이 사용자 입력인 객체를 전달하는 메서드key를 호출합니다!.
또한 바인딩this하지 않으면 오류가 발생합니다.

(유의 사항... setState()가 렌더링을 트리거함)

도움이 되었길 바라며... 이런 경우를 좀 더 효율적으로 관리할 수 있는 제안을 구합니다!



시아 모험가