javascript - event.target.value 在 React Hooks 中返回一个对象

Question

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

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

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

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

标签： javascriptreactjsreact-reduxfrontendreact-hooks

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