我面临的问题真的很烦人，当我试图编辑输入文本的默认值时，输入字段不会键入我的更改，或者只有在键入第一个字符后才会失去焦点，并返回到默认值。但是请注意，只有当我添加onChange事件时才会发生这种情况。如果我移除它，输入工作正常。发生了什么

const AddMaker = () => {

    const [make, setMake] = useState();

    function ConditionalTableRow(props) {
        let { item, index  } = props;

        if ( index === editModeIndex)
            return (<TableRowWithSave item={item} index={index} />)
        else
            return (<TableRowWithEdit item={item} index={index} />)

    }

    function TableRowWithSave(props) {
        let { item } = props;
        return (
            <TableRow>
                <TableCell>
                    <input type="text"  defaultValue={item.make} onChange={e => setMake(e.target.value)} />
                </TableCell>

                <TableCell>
                    <button className="palletSaveButton" onClick={handleSaveClick}> Save </button>
                </TableCell>
            </TableRow>
        )
    }
    
    return (
        <TableBody>
        {
            records.map((item, index) => (
                <ConditionalTableRow key={index} item={item} index={index} />
            ))
        }
        </TableBody>
    );
}

---

顺晟科技：

简短的答案是可能的，因为每按一次键就会导致一个带有onChange事件的重新程序。

这是一个很好的问题，我也有同样的问题，有3个部分。

1. 随机生成的密钥。
2. 错误的事件类型。
3. 错误的react JSX属性。

键:使用随机键时，每个rerender都会导致react失去焦点。

EventTypes:onChange每次击键都会导致一个rerender，但这也会导致问题。onBlur更好，因为它在您单击输入外后更新。输入应该使用事件，除非您希望输入到屏幕上的某个内容（visual builders）。

属性:JSX不是HTML，它有自己的属性。与其使用value，不如在input中使用。

一旦我改变了这三件事，它就很有效。下面的示例。

父级:

const AddMaker = () => {

    const [make, setMake] = useState();

    function ConditionalTableRow(props) {
        let { item, index  } = props;

        if ( index === editModeIndex)
            return (<TableRowWithSave item={item} index={index} />)
        else
            return (<TableRowWithEdit item={item} index={index} />)

    }

    function TableRowWithSave(props) {
        let { item } = props;
        return (
            <TableRow>
                <TableCell>
                    <input type="text"  defaultValue={item.make} onChange={e => setMake(e.target.value)} />
                </TableCell>

                <TableCell>
                    <button className="palletSaveButton" onClick={handleSaveClick}> Save </button>
                </TableCell>
            </TableRow>
        )
    }
    
    return (
        <TableBody>
        {
            records.map((item, index) => (
                <ConditionalTableRow key={index} item={item} index={index} />
            ))
        }
        </TableBody>
    );
}

子:

const AddMaker = () => {

    const [make, setMake] = useState();

    function ConditionalTableRow(props) {
        let { item, index  } = props;

        if ( index === editModeIndex)
            return (<TableRowWithSave item={item} index={index} />)
        else
            return (<TableRowWithEdit item={item} index={index} />)

    }

    function TableRowWithSave(props) {
        let { item } = props;
        return (
            <TableRow>
                <TableCell>
                    <input type="text"  defaultValue={item.make} onChange={e => setMake(e.target.value)} />
                </TableCell>

                <TableCell>
                    <button className="palletSaveButton" onClick={handleSaveClick}> Save </button>
                </TableCell>
            </TableRow>
        )
    }
    
    return (
        <TableBody>
        {
            records.map((item, index) => (
                <ConditionalTableRow key={index} item={item} index={index} />
            ))
        }
        </TableBody>
    );
}

表单构建的一个重要资源是： https://react-hook-form.com/

移动到并使用代替

const AddMaker = () => {

    const [make, setMake] = useState();

    function ConditionalTableRow(props) {
        let { item, index  } = props;

        if ( index === editModeIndex)
            return (<TableRowWithSave item={item} index={index} />)
        else
            return (<TableRowWithEdit item={item} index={index} />)

    }

    function TableRowWithSave(props) {
        let { item } = props;
        return (
            <TableRow>
                <TableCell>
                    <input type="text"  defaultValue={item.make} onChange={e => setMake(e.target.value)} />
                </TableCell>

                <TableCell>
                    <button className="palletSaveButton" onClick={handleSaveClick}> Save </button>
                </TableCell>
            </TableRow>
        )
    }
    
    return (
        <TableBody>
        {
            records.map((item, index) => (
                <ConditionalTableRow key={index} item={item} index={index} />
            ))
        }
        </TableBody>
    );
}

编辑：另外，移动和外部也更好

尝试向输入元素添加属性。

const AddMaker = () => {

    const [make, setMake] = useState();

    function ConditionalTableRow(props) {
        let { item, index  } = props;

        if ( index === editModeIndex)
            return (<TableRowWithSave item={item} index={index} />)
        else
            return (<TableRowWithEdit item={item} index={index} />)

    }

    function TableRowWithSave(props) {
        let { item } = props;
        return (
            <TableRow>
                <TableCell>
                    <input type="text"  defaultValue={item.make} onChange={e => setMake(e.target.value)} />
                </TableCell>

                <TableCell>
                    <button className="palletSaveButton" onClick={handleSaveClick}> Save </button>
                </TableCell>
            </TableRow>
        )
    }
    
    return (
        <TableBody>
        {
            records.map((item, index) => (
                <ConditionalTableRow key={index} item={item} index={index} />
            ))
        }
        </TableBody>
    );
}