0
this의 반응 버전을 만들려고합니다.구성 요소를 업데이트 할 때 반응 입력 요소가 업데이트되지 않음
나는 지금까지 가지고있는 것을 this Codepen에서 볼 수 있습니다.
"의심스러운 플레이어"열 아래에서 텍스트 필드에 입력 한 다음 인접한 이름 (역할 열 아래)을 클릭하여 해당 행을 제거하면 해당 텍스트가 입력 안에 지속됩니다. , 그리고 나서 다른 이름에 인접 해 있습니다.
예상되는 동작은 이름을 클릭하여 행을 제거하고 두 요소 (이름과 텍스트 입력)가 사라지는 것입니다.
테이블의 모든 항목은 클래스의 상태 인 checklist이라는 배열에 저장됩니다. 당신이 이름을 클릭는 구성 요소를 차례로 RoleList의 removeRole 기능 (호출 deleteThis 함수를 호출 할 때
class RoleCheckpoint extends React.Component {
constructor() {
super();
this.state = {
text: ""
};
}
deleteThis() {
this.props.removeRole(this.props.role.id);
}
onChange(e) {
this.setState({
text: e.target.value
});
}
render() {
console.log(this.props);
return (
<tr>
<td className="vertAlign remove noselect" onClick={this.deleteThis.bind(this)}>
{this.props.role.el}
</td>
<td>
<input type="text" className="form-control" spellCheck="false" onChange={this.onChange.bind(this)} value={this.state.text} />
</td>
</tr>
);
}
}
가이 진행됩니다
테이블의 각 목록 항목에 대한 구성 요소는 이것이다 목록 항목의 배열을 찾은 다음 일치하는 ID가있는 항목을 구성 요소 상태에서 제거합니다. RoleCheckpoint의 지주로 전달됩니다.
나는 deleteThis 기능에 this.forceUpdate()를 사용하여 시도했습니다, 그리고 당신이 볼 수있는 내가 구성 요소를 제거 할 때 입력 필드의 value 구성 요소 (text라고도 함) 상태, 아직까지 여전히 입력이 업데이트되지 않습니다 바인딩을 시도했습니다 DOM에서.
더 많은 도움이 필요 하시다면 더 많은 설명이 필요하면 알려 주시면 감사하겠습니다.