반응형
반응 입력 유형을 편집할 수 없습니다.
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
,사용하다defaultValue
property(프로퍼티) 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
반응형
'programing' 카테고리의 다른 글
Google AdSense에서 400의 잘못된 요청 (0) | 2023.03.08 |
---|---|
WooCommerce가 thrid party API에서 제품을 로드합니다. (0) | 2023.03.08 |
HTML을 출력하는 angularjs 필터 작성 방법 (0) | 2023.03.08 |
react-router-dom useParams() inside 클래스 컴포넌트 (0) | 2023.03.08 |
크기를 선택한 WordPress 미디어 업로더 (0) | 2023.03.08 |