event.target.value 在 React Hooks 中返回一个对象答案

【问题标题】：event.target.value returning an object in React Hooksevent.target.value 在 React Hooks 中返回一个对象
【发布时间】：2020-06-03 15:35:43
【问题描述】：

我正在做这个简单的事情，它将状态设置为我输入的任何内容。 onChange 函数的行为很奇怪。 我希望我的状态是什么： 项目 = { 任务：}

我想知道我做错了什么。附上我的代码。

import React, { useState } from 'react';

function TodoForm(props) {

    const [ item , setItem ] = useState({});
    const changeHandler = (event) => {
        let value = {task: event.target.value}
        console.log(value['task']); 
         /**********************************
          CONSOLE OUTPUT as I type: 
          *[object Object]s
          *[object Object]d
          *[object Object]f
         ***********************************/
        setItem(value);
    }

    return (
        <div>
            <form onSubmit={(event) => submitHandler(event)}> 
                <input value={item} onChange={changeHandler}/>
                <button> save </button>
            </form>
        </div>
    )
}

很确定我在这里做了一些非常愚蠢的事情。得到下面的输出

【问题讨论】：

item 是一个包含该值的对象，但您将其作为 value 的 prop 发送，它需要字符串值，而不是对象。

标签： javascript reactjs react-redux frontend react-hooks

【解决方案1】：

由于item是一个对象，所以输入的值应该是item.task：

import React, { useState } from 'react';

function TodoForm(props) {

    const [ item , setItem ] = useState({});
    const changeHandler = (event) => {
        let value = {task: event.target.value}
        setItem(value);
    }

    return (
        <div>
            <form onSubmit={(event) => submitHandler(event)}> 
                <input value={item.task} onChange={changeHandler}/>
                <button> save </button>
            </form>
        </div>
    )
}

【讨论】：

哦该死的。非常感谢。