делая предварительно заполненные текстовые вводы редактируемыми - PullRequest
Новая
       40

делая предварительно заполненные текстовые вводы редактируемыми

0 голосов
/ 25 января 2020

У меня есть компонент, который имеет поля ввода текста, которые предварительно заполнены. Я хочу сделать эти предварительно заполненные поля ввода текста редактируемыми, чтобы иметь возможность устанавливать / контролировать константный объект с именем smurfEdit через обработчик onChange. Я пытался выполнить это sh с помощью кода 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);

1 Ответ

1 голос
/ 26 января 2020

Вы используете e.target.name и даже не предоставляете атрибут имени для ввода.

...