使预填充的文本输入可编辑

Question

我有一个包含预填充文本输入字段的组件。我想让这些预填充的文本输入字段可编辑，以便能够通过 onChange 处理程序 set/control 一个名为 smurfEdit 的常量对象。我尝试使用代码 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);

Answer 1

您正在使用 e.target.name，甚至没有为输入提供名称属性。

使预填充的文本输入可编辑

making pre-populated text inputs editable

input

onchange

object

reactjs