SetState вызывается каждый раз, когда я что-то ввожу
поэтому я сталкиваюсь с проблемой, когда всякий раз, когда я пишу что-то на входе, вызывается handleCommentAdded, который вызывает setState, повторно отображая все. Это делает все, что напечатано или было введено на входе, отображается как комментарии, и я хочу, чтобы то, что находится на входе, когда я нажимаю кнопку «Отправить», отображалось как комментарий. Как я могу это исправить?
class WriteComments extends React.Component {
constructor(props) {
super(props);
this.state = {
commentAdded:"",
}
this.handleButton = this.handleButton.bind(this);
this.handleCommentAdded = this.handleCommentAdded.bind(this);
}
handleCommentAdded(event) {
this.setState({newComment: event.target.value});
}
handleButton() {
return(
<div>
{comment}
</div>
)
}
render() {
return(
<div>
<input type = "text" value = {this.state.commentAdded} onChange=
{this.handleCommentAdded}/>
<div className = "button">
<button
type = "button"
onClick = {e => this.handleButton(e)}
>
Write
</button>
</div>
) } }
Привет, jennelisajane, я только что отправил ответ, который мог бы лучше объяснить, чего вы пытаетесь достичь. Дайте мне знать, если это работает для вас. Я также напишу несколько комментариев для вас в песочнице.
Ответы 2
Ошибка звонит handleCommentAdded в onChange
установить состояние в handleButton
class WriteComments extends React.Component {
constructor(props) {
super(props);
this.state = {
commentAdded: ""
};
this.inputRef = React.createRef();
this.handleButton = this.handleButton.bind(this);
}
handleButton() {
this.setState({ commentAdded: this.inputRef.current.value });
}
render() {
return (
<div>
<input type = "text" ref = {this.inputRef} />
<div className = "button">
{this.state.commentAdded !== "" ? (
<div>{this.state.commentAdded}</div>
) : (
<button type = "button" onClick = {e => this.handleButton(e)}>
Write
</button>
)}
</div>
</div>
);
}
}
ReactDOM.render(<WriteComments />, document.getElementById('root'));<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />привет, так что мне делать, если мне нужно сделать что-то важное после выполнения this.setstate(commentadded) в handleButton()? Я добавил некоторый код в handlebutton после части состояния настройки, и эта часть не вызывается, потому что this.setstate перерисовывается, и мне нужно снова отправить что-то, чтобы вызвать handleButton
Я создал демонстрацию, в которой значение текстового поля можно получить нажатием кнопки. Компонент будет отображаться каждый раз, когда вызывается setState. Надеюсь, это поможет вам!
class App extends React.Component{
state = { inputValue:"" };
render(){
return(
<div>
<input type = "text" value = {this.state.inputValue} onChange = {this.handleChangeEvent} />
<button onClick = {this.handleSubmit}>Submit</button>
</div>
);
}
handleChangeEvent=(e)=>{
this.setState({ inputValue: e.target.value });
}
handleSubmit=()=>{
console.info("inputValue::", this.state.inputValue);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id = "root"></div>
Пожалуйста, проверьте свое состояние, которое вы пытаетесь установить для нового комментария, и вы не определяете внутри конструктора, пожалуйста, сделайте одно состояние для каждого whare, такого как конструктор текстового поля и setstate, это также будет работать.