使用以下代码
<div className="input-first-line-right">
<Input
type="textarea"
label="Project Description"
onChange={this.handleDescChange}
value={this.state.projectDescription}
/>
</div>
handleDescChange = text => {
if (!text) return;
this.setState({ projectDescription: text });
};
如果handleDescChange期望参数'text',那么它将永远不会被传递。 含义为什么不是代码
onChange={this.handleDescChange("some new text")}
使该功能正常工作。如果什么都没有传递给代码,代码如何隐式地知道参数是什么。
答案 0 :(得分:2)
对于<script>
function saveCookies()
{
if (document.userData.field1.value == "")
{
alert("Please Fill In All Form Values!");
return;
}
else
{
cookievalue1 = escape(document.userData.field1.value);
document.cookie = cookievalue1;
alert("The Following Data Has Been Saved To a Cookie:\n" + "\nFirst Name = " + cookievalue1);
}
}
function showCookies()
{
alert("First Name: " + cookievalue1)
}
function clearCookies()
{
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
</script>
//html code below
<!DOCTYPE HTML>
<html>
<head>
<script>
//javascript code already posted
</head>
<body>
User's First Name: <input type="text" id="field1">
<button onclick="saveCookies()">Save The Cookie</button>
<button onclick="showCookies()">Show The Cookie</button>
<button onclick="clearCookies()">Clear The Cookie</button>
</body>
</html>
属性,此处没有调用onChange
。
在这里,this.handleDescChange
作为回调函数。触发更改事件时,输入组件将调用this.handleDescChange
。
如果要传递变量,则可以使用粗箭头功能。解决方案如下。
this.handleDescChange
<div className="input-first-line-right">
<Input
type="textarea"
label="Project Description"
onChange={event => this.handleDescChange(event.target.value)}
value={this.state.projectDescription}
/>
</div>
答案 1 :(得分:0)
当我们尝试以异步方式访问React合成事件时,将触发此警告。由于 reuse (重用),在调用事件回调之后,合成事件对象将不再存在,因此我们无法访问其属性。 source
上面的源链接具有正确的答案,但这是摘要:
注意:如果要以异步方式访问事件属性,则应在事件上调用 event.persist(),这将从池中删除综合事件并允许引用由用户代码保留的事件。 React documentation
class App extends Component {
constructor(props) {
super(props);
this.state = {
projectDescription: ""
};
}
handleDescChange = event => {
// Add here
event.persist();
// Don't check for '!text' Check if there is a value
if (event.target.value === 0) return;
this.setState({ projectDescription: event.target.value });
};
render() {
return (
<div className="input-first-line-right">
<input
type="textarea"
label="Project Description"
onChange={this.handleDescChange}
value={this.state.projectDescription}
/>
</div>
);
}
}
尽管如此,我还是建议您开始学习/使用React hooks,因为它是一种更干净,更优雅的方法:
import React, { useState } from "react";
const App = () => {
// useState hook
const [projectDescription, setProjectDescription] = useState("");
const handleDescChange = event => {
if (event.target.value === 0) return;
setProjectDescription(event.target.value);
};
return (
<div className="input-first-line-right">
<input
type="textarea"
label="Project Description"
onChange={handleDescChange}
value={projectDescription}
/>
</div>
);
};