代码之家 › 专栏 › 技术社区 › Miquel Al. Vicens

反应不改变输入值

react-dom reactjs

Miquel Al. Vicens · 技术社区 · 3 年前

我是一个React初学者,但我做了一个非常基本的表单组件,但不起作用!它是 this .有什么问题吗?也许是 value={prop.value} ?

ReactDOM
    .createRoot(document.getElementById('root'))
    .render(<App />);

function App() {
    const data = [
        {
            type: 'text',
            name: 'name',
            label: 'Name',
            value: 'Alfred'
        },
        {
            type: 'number',
            name: 'amount',
            label: 'Amount',
            value: 23
        },
        {
            type: 'date',
            name: 'birthday',
            label: 'Date',
            value: '1987-02-01'
        }
    ];

    return <Form data={data} />;
}

function Form(props) {
    let [data, setData] = React.useState(props.data);
    const handleChange = (e) => {
        let elem = e.target;
        setData((data) => {
            const prop = data[elem.dataset.index];
            console.log('Input \'' + prop.name + '\' becomes from \'' + prop.value + '\' to \'' + elem.value + '\'');
            data[elem.dataset.index].value = elem.value;
            return data;
        });
    };

    return (
        <form>
            {data.map((prop, i) => {
                const id = "input-" + prop.name;
                return (
                    <div key={prop.name}>
                        <label htmlFor={id}>{prop.label}</label>
                        <span>: </span>
                        <input
                            type={prop.type}
                            id={id}
                            value={prop.value}
                            onChange={handleChange}
                            data-index={i}
                        />
                    </div>
                );
            })}
        </form>
    );
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>

1 回复 | 直到 3 年前

Nick Vu 3 年前

React的状态是不可变的,因此不能直接修改数组数据。

你必须改变 return data 到 return [...data] 即将阵列克隆到中的新值 setData 属于 handleChange

ReactDOM
    .createRoot(document.getElementById('root'))
    .render(<App />);

function App() {
    const data = [
        {
            type: 'text',
            name: 'name',
            label: 'Name',
            value: 'Alfred'
        },
        {
            type: 'number',
            name: 'amount',
            label: 'Amount',
            value: 23
        },
        {
            type: 'date',
            name: 'birthday',
            label: 'Date',
            value: '1987-02-01'
        }
    ];

    return <Form data={data} />;
}

function Form(props) {
    let [data, setData] = React.useState(props.data);
    const handleChange = (e) => {
        let elem = e.target;
        setData((data) => {
            const prop = data[elem.dataset.index];
            console.log('Input \'' + prop.name + '\' becomes from \'' + prop.value + '\' to \'' + elem.value + '\'');
            data[elem.dataset.index].value = elem.value;
            return [...data]; //the change is here
        });
    };

    return (
        <form>
            {data.map((prop, i) => {
                const id = "input-" + prop.name;
                return (
                    <div key={prop.name}>
                        <label htmlFor={id}>{prop.label}</label>
                        <span>: </span>
                        <input
                            type={prop.type}
                            id={id}
                            value={prop.value}
                            onChange={handleChange}
                            data-index={i}
                        />
                    </div>
                );
            })}
        </form>
    );
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>