如何将输入类型数值与onChangeReact链接

Question

我正在尝试将用户输入的值添加到页数字段中，到目前为止我所尝试的一切都不起作用。这是输入字段中没有onChange的原始代码。

我尝试过在没有任何运气的情况下使用onChange，字段的值始终保持起始值，我尝试过通过useState更改它，但也没有运气。

有人能告诉我怎么做吗？

import "./App.css";
function App(props) {
const [total, setTotal] = useState(0);
const [cost, setCost] = useState({
website: false,
seo: false,
google: false,
pages: 1,
languages: 1,
total: 0,
});
const [isWebChecked, setIsWebChecked] = useState(false);
useEffect(() => {
calculateTotal();
console.log("useEffect up and running");
console.log(cost.pages);
setIsWebChecked(cost.website);
}, [cost]);
const handleOnChange = (event) => {
let { name } = event.target;
let newCost = { ...cost };
newCost[name] = !newCost[name];
setCost((prev) => (prev = newCost));
if (cost.website === true) {
setIsWebChecked(true);
}
};
const calculateTotal = (event) => {
let newTotal =
0 +
(cost.website && 500) +
(cost.seo && 300) +
(cost.google && 200) +
((cost.pages > 1 || cost.languages > 1) &&
cost.pages * cost.languages * 30);
console.log(cost.pages);
setTotal((prev) => (prev = newTotal));
};
return (
<div classname="App">
<h3> Which services do you require?</h3>
<p>
<input
type="checkbox"
name="website"
onChange={handleOnChange}
value="500"
/>{" "}
A website (500 €)
</p>
{isWebChecked && (
<div className="modal">
<label htmlFor="pages">Number of web pages </label>
<input type="text" name="pages"></input>
<br />
<br />
<label htmlFor="lang">Number of languages </label>
<input type="number" name="languages"></input>
</div>
)}
<p>
<input
type="checkbox"
name="seo"
onChange={handleOnChange}
value="300"
/>{" "}
A SEO consultancy (300 €)
</p>
<p>
<input
type="checkbox"
name="google"
onChange={handleOnChange}
value="200"
/>{" "}
A Google Ads Campaign (200 €)
</p>
<p>
{" "}
<strong>Total price: {total} €</strong>{" "}
</p>
</div>
);
}
export default App;```

Answer 1

这个页面上有一个名为"处理表格"：https://www.w3schools.com/react/react_forms.asp您需要将更改时处理程序中正在更改的状态(如果我看对了，则为handleOnChange)分配给要更改的输入的value属性。

例如，对于Number of web pages字段，它看起来像：<input type="text" name="pages" onChange={handleNumOfPagesChange} value={numOfPages}>，其中numOfPages将是您的状态。此外，我会避免将复杂的对象作为状态(查看cost状态)。

Answer 2

我们有这个：

const [cost, setCost] = useState({
website: false,
seo: false,
google: false,
pages: 1,
languages: 1,
total: 0,
});

然后我们可以更新CCD_ 7&每当输入值发生变化时，cost.languages状态为：

<input
type="text"
name="pages"
onChange={(e) => setCost({ ...cost, pages: e.target.value })}
/>
<input
type="number"
name="languages"
onChange={(e) => setCost({ ...cost, languages: e.target.value })}
/>

您的calculateTotal必须使用react-useCallback挂钩，因为计算取决于cost状态。

const calculateTotal = useCallback(
(event) => {
let newTotal =
0 +
(cost.website && 500) +
(cost.seo && 300) +
(cost.google && 200) +
((cost.pages > 1 || cost.languages > 1) &&
cost.pages * cost.languages * 30);
setTotal((prev) => (prev = newTotal));
},
[cost]
);

创建计算触发器，其中calculateTotal将在任何cost更改时调用：

useEffect(() => {
calculateTotal();
}, [cost, calculateTotal]);

并添加useEffect观察程序来重置cost.pages&取消选择cost.website:时的cost.languages

useEffect(() => {
!cost.website &&
(cost.pages > 1 || cost.languages > 1) &&
setCost({ ...cost, pages: 1, languages: 1 });
}, [cost]);

最后，工作代码如下：

function App() {
const [total, setTotal] = React.useState(0);
const [cost, setCost] = React.useState({
website: false,
seo: false,
google: false,
pages: 1,
languages: 1,
total: 0,
});
const [isWebChecked, setIsWebChecked] = React.useState(false);
const calculateTotal = React.useCallback(
(event) => {
let newTotal =
0 +
(cost.website && 500) +
(cost.seo && 300) +
(cost.google && 200) +
((cost.pages > 1 || cost.languages > 1) &&
cost.pages * cost.languages * 30);
setTotal((prev) => (prev = newTotal));
},
[cost]
);
React.useEffect(() => {
calculateTotal();
}, [cost, calculateTotal]);
const handleOnChange = React.useCallback(
(event) => {
const { name } = event.target;
const newCost = { ...cost };
newCost[name] = !newCost[name];
setCost((prev) => newCost);
setIsWebChecked(newCost.website);
},
[cost]
);
React.useEffect(() => {
!cost.website &&
(cost.pages > 1 || cost.languages > 1) &&
setCost({ ...cost, pages: 1, languages: 1 });
}, [cost]);
return (
<div className="App">
<h3> Which services do you require?</h3>
<p>
<input
type="checkbox"
name="website"
onChange={handleOnChange}
value="500"
/>{" "}
A website (500 €)
</p>
{isWebChecked && (
<div className="modal">
<label htmlFor="pages">Number of web pages </label>
<input
type="text"
name="pages"
onChange={(e) => setCost({ ...cost, pages: e.target.value })}
/>
<br />
<br />
<label htmlFor="lang">Number of languages </label>
<input
type="number"
name="languages"
onChange={(e) => setCost({ ...cost, languages: e.target.value })}
/>
</div>
)}
<p>
<input
type="checkbox"
name="seo"
onChange={handleOnChange}
value="300"
/>{" "}
A SEO consultancy (300 €)
</p>
<p>
<input
type="checkbox"
name="google"
onChange={handleOnChange}
value="200"
/>{" "}
A Google Ads Campaign (200 €)
</p>
<p>
{" "}
<strong>Total price: {total} €</strong>{" "}
</p>
</div>
);
}
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>