onChange 수신기를 사용해도 반응에서 입력 값을 변경할 수 없는 이유

onChange 수신기를 사용해도 반응에서 입력 값을 변경할 수 없는 이유

저는 React를 처음 접하는 사람이고, 튜토리얼을 몇 가지 받은 후 아래 코드를 사용해 보았습니다.

부품 하나를 만들어서 가게에서 소품을 건네주고componentWillMount컴포넌트의 상태를 새로 만듭니다.지금까지는 렌더링에 문제가 없습니다.

다음에 나는 나의 바운드를 묶었다.state입력 상자의 가치로 바꿀 수 있습니다.onChange듣는 사람도 있어요.그래도 현장에서 제 가치관을 바꿀 수는 없어요.

나는 Angular 배경에서 왔기 때문에 아래와 같이 바인딩 입력의 값이 자동으로 속성을 갱신할 것이라고 생각합니다.name에state물건.내가 틀렸나요?

componentWillMount(){
    this.setState({
        updatable : false,
        name : this.props.name,
        status : this.props.status
    });
}

//relevant DOM from component's render function
<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange.bind(this)}/>

onTodoChange(){
    console.log(this);
    //consoling 'this' here, shows old values only.
    //not sure how and even if I need to update state here.
    // Do I need to pass new state to this function from DOM
    //TODO: send new data to store
}

나의onTodoChange기능을 통해 가치를 높이다this초기화와 동일한 상태 값을 가집니다.입력란에 입력해서 상점에 보낼 수 있는 상태변경은 어떻게 해야 하나요?

Angular의 경우와 달리 React.js에서는 상태를 수동으로 업데이트해야 합니다.다음과 같은 작업을 수행할 수 있습니다.

<input
    id={'todoName' + this.props.id}
    className="form-control"
    type="text"
    value={this.state.name}
    onChange={e => this.onTodoChange(e.target.value)}
/>

그 다음 기능:

onTodoChange(value){
        this.setState({
             name: value
        });
    }

또한 구성 요소의 생성자에서 초기 상태를 설정할 수도 있습니다.

  constructor (props) {
    super(props);
    this.state = {
        updatable: false,
        name: props.name,
        status: props.status
    };
  }

위에서 새로운 함수를 선언하지 않고 단순히 상태 변수를 변경하는 경우 인라인 함수를 통해 바로 가기를 수행할 수 있습니다.

<input type="text" onChange={e => this.setState({ text: e.target.value })}/>

를 사용하여defaultValueprop in input에서는 fetch API와 같은 기본값을 설정하고 데이터를 입력에 넣을 수 있습니다.

<input type="text" defaultValue={value} />

레퍼런스: https://reactjs.org/docs/uncontrolled-components.html

그게 당신에게 가장 좋은 방법이라고 생각해요.

다음을 추가해야 합니다.this.onTodoChange = this.onTodoChange.bind(this).

그리고 당신의 기능에는 이벤트가 있습니다.param(e), 및 값을 얻습니다.

componentWillMount(){
        this.setState({
            updatable : false,
            name : this.props.name,
            status : this.props.status
        });
    this.onTodoChange = this.onTodoChange.bind(this)
    }
    
    
<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange}/>

onTodoChange(e){
         const {name, value} = e.target;
        this.setState({[name]: value});
   
}

1개의 핸들러로 복수의 입력을 처리하고 싶은 경우는, 제가 사용하고 있는 어프로치를 봐 주세요.computed property이름을 기반으로 입력 값을 가져옵니다.

import React, { useState } from "react";
import "./style.css";

export default function App() {
  const [state, setState] = useState({
    name: "John Doe",
    email: "john.doe@test.com"
  });

  // We need to spread the previous state and change the one we're targeting, so other data cannot be lost.
  const handleChange = e => {
    setState(prevState => {
      ...prevState,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <div>
      <input
        type="text"
        className="name"
        name="name"
        value={state.name}
        onChange={handleChange}
      />

      <input
        type="text"
        className="email"
        name="email"
        value={state.email}
        onChange={handleChange}
      />
    </div>
  );
}

React에서 구성 요소는 상태 또는 프로펠이 변경된 경우에만 다시 렌더링(또는 업데이트)됩니다.

이 경우 구성 요소가 업데이트 상태 값으로 다시 렌더링되도록 변경 후 즉시 상태를 업데이트해야 합니다.

onTodoChange(event) {
        // update the state
    this.setState({name: event.target.value});
}

반응 시, 상태를 변경할 수 없습니다.this.setState({});그래서 콘솔메시지에 오래된 값이 표시됩니다.

언급URL : https://stackoverflow.com/questions/41736213/why-cant-i-change-my-input-value-in-react-even-with-the-onchange-listener