programing

반응 입력 유형을 편집할 수 없습니다.

skycolor 2023. 3. 8. 20:58
반응형

반응 입력 유형을 편집할 수 없습니다.

react에서 입력 파일에 동적 값을 추가하고 편집하려고 했지만 편집이 전혀 되지 않았습니다.

var shop_profile_data = this.state.data.DETAILS;

<input id="shopname" className="inputMaterial"  value={shop_profile_data.NAME} type="text" required/>

해결책을 주세요.감사해요.

부터value는 항상 같은 값으로 렌더링됩니다(shop_profile_data.NAME)는 아무것도 변경할 수 없습니다.설정별value당신이 만들고 있는 재산input제어 컴포넌트

다음 명령어를 추가해야 합니다.onChange이벤트 설정 후shop_profile_data.NAME다른 값으로.그 후, 의 값은input변화할 것입니다.

의 초기값만 설정하는 경우input,사용하다defaultValueproperty(프로퍼티) defaultValue는 초기값을 설정하지만 그 후 값을 변경할 수 있습니다.

제어된 컴포넌트와 제어되지 않은 컴포넌트에 대한 자세한 내용은 를 참조하십시오.

사용해보십시오.defaultValue대신value,defaultValue값을 설정하고 편집할 수도 있습니다.코드는 다음과 같습니다.

<input id="shopname" className="inputMaterial"  defaultValue={shop_profile_data.NAME} type="text" required/>

참조:제어되지 않는 컴포넌트– 리액

다음 코드는 입력 태그를 reactjs로 편집하는 방법을 보여줍니다.

import React from 'react';
import { render } from 'react-dom';

    class App extends React.Component{
      constructor(props){
        super(props);
        this.state = {
          data: 2016
        }  
      }
      _handleChangeEvent(val) {
        return val;
      }
      render(){
        return (
          <div>
            <input type='number' 
                   onChange={()=>{this._handleChangeEvent(this.state.data);}} 
                   defaultValue={this.state.data} />
          </div>
        );
      }
    }

render(<App/>, document.getElementById('app'));

언급URL : https://stackoverflow.com/questions/36067562/react-input-type-not-editable

반응형