이 구성 요소가 있습니다.
import React from 'react';
export default class AddItem extends React.Component {
add() {
this.props.onButtonClick(this.input.value);
this.input.value = '';
}
render() {
return (
<div className="add-item">
<input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
<button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
</div>
);
}
}
입력 값이 비어있을 때 버튼을 비활성화하고 싶습니다. 그러나 위의 코드는 작동하지 않습니다. 그것은 말한다 :
add-item.component.js : 78 Uncaught TypeError : Cannot read property ‘value’of undefined
가리키는 disabled={!this.input.value}. 여기서 내가 뭘 잘못하고 있니? render메서드가 실행될 때 아마도 ref가 아직 생성되지 않았다고 생각합니다 . 그렇다면 해결 방법은 무엇입니까?
답변
refsDOM을 직접 읽으므로 사용 은 모범 사례가 아니며 state대신 React를 사용하는 것이 좋습니다. 또한 구성 요소가 다시 렌더링되지 않고 초기 상태를 유지하므로 버튼이 변경되지 않습니다.
이벤트 리스너 setState와 함께 사용 onChange하여 입력 필드가 변경 될 때마다 구성 요소를 다시 렌더링 할 수 있습니다 .
// Input field listens to change, updates React's state and re-renders the component.
<input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} />
// Button is disabled when input state is empty.
<button disabled={!this.state.value} />
다음은 작동하는 예입니다.
class AddItem extends React.Component {
constructor() {
super();
this.state = { value: '' };
this.onChange = this.onChange.bind(this);
this.add = this.add.bind(this);
}
add() {
this.props.onButtonClick(this.state.value);
this.setState({ value: '' });
}
onChange(e) {
this.setState({ value: e.target.value });
}
render() {
return (
<div className="add-item">
<input
type="text"
className="add-item__input"
value={this.state.value}
onChange={this.onChange}
placeholder={this.props.placeholder}
/>
<button
disabled={!this.state.value}
className="add-item__button"
onClick={this.add}
>
Add
</button>
</div>
);
}
}
ReactDOM.render(
<AddItem placeholder="Value" onButtonClick={v => console.log(v)} />,
document.getElementById('View')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>답변
HTML에서
<button disabled/>
<buttton disabled="true">
<buttton disabled="false">
<buttton disabled="21">
비어 있지 않은 문자열에 대해 true를 반환하기 때문에 모두 disabled = “true”로 요약됩니다. 따라서 false를 반환하려면 this.input.value? “true”: “” 와 같은 조건문에 빈 문자열을 전달합니다 .
render() {
return (
<div className="add-item">
<input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
<button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
</div>
);
}
답변
refs를 통해 입력 값을 설정해서는 안됩니다.
https://facebook.github.io/react/docs/forms.html#control-components 에서 제어 된 양식 구성 요소에 대한 설명서를 살펴보십시오.
간단히 말해서
<input value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />
그런 다음 사용하여 비활성화 상태를 제어 할 수 있습니다. disabled={!this.state.value}
답변
React에서 컴포넌트 렌더링을 제어하는 일반적인 방법은 거의 없습니다.
그러나 나는 여기에서 이것들 중 어느 것도 사용하지 않았으며, 단지 참조를 사용하여 구성 요소의 기본 자식을 네임 스페이스로 지정했습니다.
class AddItem extends React.Component {
change(e) {
if ("" != e.target.value) {
this.button.disabled = false;
} else {
this.button.disabled = true;
}
}
add(e) {
console.log(this.input.value);
this.input.value = '';
this.button.disabled = true;
}
render() {
return (
<div className="add-item">
<input type="text" className = "add-item__input" ref = {(input) => this.input=input} onChange = {this.change.bind(this)} />
<button className="add-item__button"
onClick= {this.add.bind(this)}
ref={(button) => this.button=button}>Add
</button>
</div>
);
}
}
ReactDOM.render(<AddItem / > , document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>답변
this.inputref콜백이 호출 될 때까지 정의되지 않습니다 . this.input생성자에서 초기 값을 설정해보십시오 .
에서 (가) 심판에 문서 반응 강조 광산 :
콜백 즉시 실행될 후 부품 장착 또는 IS 마운트
답변
비슷한 문제가 있었는데이를 수행하기 위해 후크가 필요하지 않다는 것이 밝혀졌습니다. 조건부 렌더링을 만들 수 있으며 여전히 잘 작동합니다.
<Button
type="submit"
disabled={
name === "" || email === "" || password === "" ? true : false
}
fullWidth
variant="contained"
color="primary"
className={classes.submit}>
SignUP
</Button>
답변
그냥 추가 :
<button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
