[英]How to change a class component (input, conditional) to functional component with useState - hook?
I'd like to change a working class component into a functional component.我想将工作的 class 组件更改为功能组件。 It's basically an input field that should:
它基本上是一个输入字段,应该:
1) Dynamically display/Mirror whatever you enter (see the h1 below the form) 2) Show "no data provided" if nothing entered 1) 动态显示/镜像您输入的任何内容(参见表格下方的 h1) 2) 如果未输入任何内容,则显示“未提供数据”
The error message says "Failed to compile... unexpected use of "event""错误消息显示“编译失败...意外使用“事件””
import React, { useState } from "react"
function Exercise2() {
const [input, inputChange] = useState({firstName: ""})
const handleChange = () => {
inputChange({[event.target.name]: event.target.value});
}
let display
if (useState.firstName != "") {
display = useState.firstName
} else {
display = "no data provided!"
}
return (
<div>
<form>
<input
type="text"
name="firstName"
placeholder="Enter your data here"
value = "input.firstName"
onChange = "handleChange"
/>
</form>
<h1>{display}</h1>
</div>
)
}
export default Exercise2
Can someone point out what I am missing (without altering the code structure too much since I want to stick to my beginners logic).有人可以指出我缺少的东西(因为我想坚持我的初学者逻辑,所以不会过多地改变代码结构)。 Thx
谢谢
PS: this was my class component which worked perfectly and that I am trying to translate PS:这是我的 class 组件,它运行良好,我正在尝试翻译
class Exercise1 extends React.Component {
constructor() {
super()
this.state = {
firstName:""
}
this.handleChange = this.handleChange.bind(this)
}
handleChange (event) {
this.setState({
[event.target.name]: event.target.value
})
}
render() {
let display
if(this.state.firstName != "") {
display=this.state.firstName
} else {
display="no data provided!"
}
return (
<div>
<form>Input:
<input
type="text"
name="firstName"
placeholder = "Enter your data here!"
value={this.state.firstName}
onChange={this.handleChange}
/>
</form>
<h1>{display}</h1>
</div>
)
}
}
So, the key things are:所以,关键是:
1) Not placing the variable/method names in curly braces 1) 不将变量/方法名称放在花括号中
value={input.firstName}
onChange={handleChange}
2) Not including an event
arg in your handleChange
method: 2) 在您的
handleChange
方法中不包括event
参数:
const handleChange = (event) => {
Here I've corrected those problems and also changed how the display is being rendered to make it more "React-like".在这里,我已经纠正了这些问题,并更改了显示的渲染方式,使其更加“类似 React”。
const { useState } = React; function Exercise2() { // Here you're setting state and assigning an object to it with // once property: `firstName` const [ input, inputChange ] = useState({ firstName: '' }); const handleChange = (event) => { // The click event has been passed in. // `target` is the element that's been clicked. We're just grabbing the name and // value from it. We're assigning the name `firstName` as a dynamic property key name // (we wrap it in square braces), and assign the value to it. We do that because we want to // update the `firstName` property in the state object. // Because state is an object (and we might eventually have other properties in there // that we want to keep when we update this value) we return an object containing all // the properties of input, and the new dynamic property inputChange({...input, [event.target.name]: event.target.value }); } // `input` is an object with a firstName property. // We can destructure the `firstName` property from the state to make // it easier to work with const { firstName } = input; console.log(input) let display; if (firstName.length) { display = firstName; } else { display = "no data provided;"; } return ( <div> <form> <input type="text" name="firstName" placeholder="Enter your data here" value={firstName} onChange={handleChange} /> </form> <h1>{display}</h1> </div> ). } ReactDOM,render(<Exercise2 />. document;getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"/>
import React, { useState } from "react"
function Exercise2() {
const [input, inputChange] = useState({firstName: ""})
const handleChange = (event) => {
inputChange({[event.target.name]: event.target.value});
}
let display
if (input.firstName !== "") {
display = input.firstName
} else {
display = "no data provided!"
}
return (
<div>
<form>
<input
type="text"
name="firstName"
placeholder="Enter your data here"
value = {display}
onChange = {handleChange}
/>
</form>
<h1>{display}</h1>
</div>
)
}
export default Exercise2
You're syntax seems to be wrong, you should try something like你的语法似乎是错误的,你应该尝试类似
import React, { useState } from "react"
function Exercise2() {
const [formData, changeFormData] = useState({firstName: ""});
const handleChange = (event) => {
changeFormData({[event.target.name]: event.target.value});
}
return (
<div>
<form>
<input
type="text"
name="firstName"
placeholder="Enter your data here"
value={formData.firstName}
onChange={handleChange}
/>
</form>
<h1>{formData.firstName !== "" ? formData.firstName : 'no data provided!'}</h1>
//the above line is a ternary operator, basically it reads as if( input.firstName !== "") return input.firstName : else return 'no data provided!'
</div>
)
}
export default Exercise2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.