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

Question

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

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