当我尝试输入时，React Js 输入失去焦点，但仅在添加 onChange 时答案

【问题标题】：React Js input is losing focus when I try typing in it but only when onChange is added当我尝试输入时，React Js 输入失去焦点，但仅在添加 onChange 时
【发布时间】：2021-09-20 15:47:37
【问题描述】：

我面临的问题真的很烦人，当我尝试编辑输入文本的默认值时，输入字段不会输入我的更改，或者只有在输入第一个字符后才会失去焦点，它会返回它是默认值。但请注意，这只发生在我添加 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>
    );
}

【问题讨论】：

在我看来，通过闭包而不是在 props 中传递它来访问父状态的相互定义组件确实是错误的。
我不确定在函数组件中定义函数组件是个好主意
同意你们。这不是您想要遵循的模式。你不会在适当的 React 应用程序中看到它。

标签： javascript html reactjs

【解决方案1】：

将useState 移动到TableRowWithSave 并使用value 而不是defaultValue

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;
    const [make, setMake] = useState(item.make);
    return (
        <TableRow>
            <TableCell>
                <input type="text" value={make} onChange={e => setMake(e.target.value)} />
            </TableCell>
            <TableCell>
                <button className="palletSaveButton" onClick={handleSaveClick}> Save </button>
            </TableCell>
        </TableRow>
    )
}

const AddMaker = () => {
    return (
        <TableBody>
        {
            records.map((item, index) => (
                <ConditionalTableRow key={index} item={item} index={index} />
            ))
        }
        </TableBody>
    );
}

编辑：最好将ConditionalTableRow 和TableRowWithSave 移到AddMaker 之外

【讨论】：

【解决方案2】：

尝试将value 属性添加到输入元素。

<input type="text" value={make}  defaultValue={item.make} onChange={e => setMake(e.target.value)} />

【讨论】：

【解决方案3】：

简短的回答是可能的，因为每次击键都会导致 onChange 事件重新呈现。

这是一个很好的问题，我也遇到了同样的问题，分为 3 个部分。

随机生成的密钥。
错误的事件类型。
反应 JSX 属性错误。

Keys：当您使用随机键时，每次重新渲染都会导致 react 失去焦点 (key={Math.random()*36.4621596072})。

EventTypes：onChange 会导致每次击键时重新渲染，但这也可能导致问题。 onBlur 更好，因为它会在您在输入之外单击后更新。输入，除非您想将"bind" 输入到屏幕上的某些内容（可视化构建器），否则应使用onBlur 事件。

属性：JSX 不是 HTML，它有自己的属性 (className,...)。与其使用值，不如在输入中使用defaultValue={foo}。

一旦我改变了这 3 件事，它就很好用。下面的例子。

家长：

const [near, setNear] = useState( "" );
const [location, setLocation] = useState( "" );
 <ExperienceFormWhere 
        slug={slug} 
        questionWhere={question_where} 
        setLocation={handleChangeSetLocation} 
        locationState={location} 
        setNear={setNear} 
        nearState={near} 
        key={36.4621596072}/>

孩子：

<input 
defaultValue={locationState} 
className={slug+"_question_where_select search_a_location"} 
onBlur={event => setLocation(event.target.value)}/>

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

【讨论】：