如何使用 useState - hook 将 class 组件（输入，条件）更改为功能组件？

Question

我想将工作的 class 组件更改为功能组件。 它基本上是一个输入字段，应该：

1) 动态显示/镜像您输入的任何内容（参见表格下方的 h1） 2) 如果未输入任何内容，则显示“未提供数据”

错误消息显示“编译失败...意外使用“事件””

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

有人可以指出我缺少的东西（因为我想坚持我的初学者逻辑，所以不会过多地改变代码结构）。 谢谢

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>
        )
    }
}

Answer 1

所以，关键是：

1) 不将变量/方法名称放在花括号中

value={input.firstName}
onChange={handleChange}

2) 在您的handleChange方法中不包括event参数：

const handleChange = (event) => {

在这里，我已经纠正了这些问题，并更改了显示的渲染方式，使其更加“类似 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"/>

Answer 2

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

Answer 3

你的语法似乎是错误的，你应该尝试类似

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