构造函数问题(react Javascript)用于递增

Question

我如何在React组件中创建一个文本输入，该文本输入将显示一个带有提交按钮的文本框，旁边应该有一个数字，每次我点击"提交"时都会增加这个数字。增量值(添加到计数器中)将是提交的每个单词的长度。

比如说我在文本框中写上"hi"(2个字母)，然后点击提交-我的计数器应该显示2如果我在这里写"欢迎"-不是计数器会加7 ==>所以它会显示9

局部状态应该在类组件内部。

谢谢:)

这是我得到的:

import React, { Component } from 'react'

export class TextInput extends Component {
constructor(){
super()
this.state = {
count: 0
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
}



render(){
return(
<div>
<h1>{this.state.count}</h1>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<button onClick = {this.handleClick}>Change</button>
</div>
)
}
}
export default TextInput

Answer 1

您需要使用value状态并将其长度添加到count状态:

import React, { Component } from "react";
export class TextInput extends Component {
state = {
count: 0,
value: "",
};
handleClick = () => {
this.setState((prevState) => {
return {
count: prevState.count + prevState.value.length,
value: "",
};
});
};
handleChange = (e) => {
this.setState({ value: e.target.value });
};
render() {
return (
<div>
<h1>{this.state.count}</h1>
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>Change</button>
</div>
);
}
}
export default TextInput;