使预填充文本输入可编辑

Question

我有一个具有预先填充的文本输入字段的组件。我想使这些预填充的文本输入字段可编辑，以便能够通过onChange处理程序设置/控制名为smurfEdit的const对象。我尝试使用代码readonly="false完成此操作。但是，这没有用。我已经预先用输入字段填充的文本仍然不允许我对其进行编辑。有人可以帮我解决这个问题吗？

这里是有关输入字段的代码：

<input value={smurfEdit.name} onChange={handleChanges} readonly="false" />
<input value={smurfEdit.age} onChange={handleChanges} readonly="false" />
<input value={smurfEdit.height} onChange={handleChanges} readonly="false" />

这里是整个组件的代码：

import React, { useState } from "react";
import { connect } from "react-redux";

import { deleteSmurf } from "../actions/actions";

const Smurf = props => {
    const [editMode, setEditMode] = useState(false);
    const [smurfEdit, setSmurfEdit] = useState({
        name: props.smurf.name,
        age: props.smurf.age,
        height: props.smurf.height
    })

    const toggleEditMode = e => {
        e.preventDefault();
        setEditMode(!editMode);
    }

    const handleChanges = e => setSmurfEdit({
        ...smurfEdit,
        [e.target.name]: e.target.value
    })

    return (
        <div className="smurfs">
            {/* section renders smurf name, age and height */}
            <section>
                <h3>{props.smurf.name}</h3>
                <p>age: {props.smurf.age}</p>
                <p>height: {props.smurf.height}</p>
            </section>

            {editMode && 
            <div>
                <input value={smurfEdit.name} onChange={handleChanges} readonly="false" />
                <input value={smurfEdit.age} onChange={handleChanges} readonly="false" />
                <input value={smurfEdit.height} onChange={handleChanges} readonly="false" />
            </div>
            }


            <button onClick={e => props.deleteSmurf(e, props.smurf.id)}>X</button>
            <button onClick={toggleEditMode}>Edit</button>
        </div>
    )
}


export default connect(null, { deleteSmurf })(Smurf);