OnChange in React 不捕获文本的最后一个字符

这是我的渲染函数:

  render: function() {
return  <div className="input-group search-box">
<input
onChange={this.handleTextChange}
type="text"
value={this.state.text}
className="form-control search-item" />
<span className="input-group-btn"></span>
</div>
}

我有这个作为我的事件处理程序:

   handleTextChange: function(event) {
console.log(event.target.value);
this.setState({
text: event.target.value
});
}

问题是，当我“保存”一个条目，或者 console. log 打印输出时，最后一个字符不见了——例如，如果我输入“ first”，就会打印出“ firs”，并且需要另一个键事件来捕获最后一个字符。我试过 onKeyUp，它不允许我输入任何东西，我还试过 onKeyDown和 onKeyPress，它什么也输出不了。 这里发生了什么? 为什么? 我怎样才能让最后一个角色出现？

48269 次浏览
小开
最佳答案

你什么时候登记？请记住，setState是异步的，因此如果要打印 新的状态，必须使用回调参数。想象一下这个组件:

let Comp = React.createClass({
getInitialState() {
return { text: "abc" };
},


render() {
return (
<div>
<input type="text" value={this.state.text}
onChange={this.handleChange} />
<button onClick={this.printValue}>Print Value</button>
</div>
);
},


handleChange(event) {
console.log("Value from event:", event.target.value);


this.setState({
text: event.target.value
}, () => {
console.log("New state in ASYNC callback:", this.state.text);
});


console.log("New state DIRECTLY after setState:", this.state.text);
},


printValue() {
console.log("Current value:", this.state.text);
}
});

在输入的末尾键入 d将导致以下内容被记录到控制台:

Value from event: abcd
New state DIRECTLY after setState: abc
New state in ASYNC callback: abcd

请注意，中间值缺少最后一个字符。

小开

以异步方式调用 setState ()函数。不使用回调，您可以使用另一个辅助变量来立即存储和使用更新的值。比如:

export default class My_class extends Component{
constructor(props)
{
super(props):
this.state={
text:"",
};
this.text="";
}
render: function() {
return  <div className="input-group search-box">
<input
onChange={this.handleTextChange}
type="text"
value={this.state.text}
className="form-control search-item" />
<span className="input-group-btn"></span>
</div>
}


handleTextChange: function(event) {
console.log(event.target.value);
this.text = event.target.value;
this.setState({
text: event.target.value
});
}

您将立即在 this. text 变量中获得更新后的值。但是您应该使用 this.state.text 在 UI 中显示文本。

小开

因为 setState ()函数是异步的，所以我使用 wait

render: function() {
return  <div className="input-group search-box">
<input
onChange={(e) => {this.handleTextChange(e)}}
type="text"
value={this.state.text}
className="form-control search-item" />
<span className="input-group-btn"></span>
</div>
}

HandleTextCahnge 函数:

handleTextChange = async function(event) {


await this.setState({text: event.target.value});
console.log(this.state.text);
}
小开

因为 反应16.8节你可以使用反应钩。

import React, { useState } from 'react';


const MyComponent = () => {


const [userInput, setUserInput] = useState("");


const changeHandler = (e) => {
setUserInput(e.target.value);
}


return (
<div>
<input onChange={changeHandler} value={userInput}></input>
</div>
)
}

对我很有效。

小开

由于反应16.8节反应钩可以有所帮助。 我建议使用状态和使用效果。 这个例子在 React National 中，但是它应该显示如何使用 useEffect。更多关于 useEffect 的信息: < a href = “ https://reactjs.org/docs/hooks-effect.html”rel = “ nofollow norefrer”> https://reactjs.org/docs/hooks-effect.html

import React, {useState, useEffect} from 'react';
import { TextInput } from 'react-native';


export interface Props{}
 

const InformationInputs: React.FC<Props> = (props) => {
const [textInputs, setTextInputs] = useState("");


const handleValueChange = () => {
console.log(textInputs);
}


useEffect(() => {
handleValueChange();
}, [textInputs]);


return (
<TextInput
placeholder={'Text'}
onChangeText={(value: string) => { setTextInputs(value) }}
/>
);
};
小开 
import React, { useState, useEffect } from 'react';


const MyComponent = () => {


const [userInput, setUserInput] = useState("");


const changeHandler = (e) => {
setUserInput(e.target.value);
}


useEffect(()=> {
//here you will have correct value in userInput
},[userInput])


return (
<div>
<input onChange={changeHandler} value={userInput}></input>
</div>
)
}
小开

在设置状态之前打印到控制台。在设置状态后写入控制台日志。它将显示全文。(我也有同样的问题)

handleTextChange: function(event) {
**console.log(event.target.value)**




this.setState({
text: event.target.value
});
}

提交答案