인라인 편집을 구현하고 싶었지만 문제가 있습니다. 텍스트를 클릭하면 텍스트 필드가 나타나고 텍스트를 채우고 Enter 키를 누르거나 아무 곳이나 클릭하면 채워진 텍스트가 설정되지 않습니다. 내가 한 실수는 무엇입니까?
암호
export default class InlineEditing extends Component {
constructor() {
super();
this.state = {
edit: false,
text: 'Click here to name your device'
};
}
handleDeviceName = () => { this.setState({ edit: true })};
addDeviceName = (e) => {
this.setState({
text: e.target.value
});
};
render() {
return (
<Wrapper>
<div
onClick={this.handleDeviceName}
>
{this.state.edit ?
<TextField
name = "device_name"
onClick={this.addDeviceName}
/> :
this.state.text
}
</div>
</Wrapper>
);
}
}
addDeviceName사용자가 텍스트 필드를 클릭하자마자 함수 가 호출되고 필드의 현재 텍스트가 상태로 설정됩니다. 당신은 변경해야 onClick처럼 어떤 일에 이벤트를 onChange하거나onBlur
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다