javascript处理react网站

Question

网站是用react框架开发的，想用document.getElementById("name").value="zero"的方式进行表单赋值，表面上是成功了，单提交的时候提示字段为空，其实是没有赋值成功的，想请教一下，怎么用js的方式进行赋值？

Answer 1

首先你要区分 受控组件和非受控组件,
你这么赋值的话,非受控组件是可以被改变,那么你提交表单的时候也应该用document.getElementById("name").value之类的方法拿到value,而不是用默认的方式拿value.

要么就用state.value来进行组件值的控制,那么改变state.value自然组件展示也改变了， 提交表单时,就用state.value取到对应值.

Answer 2

import React, { useRef } from 'react';

const Input = () => {
    const input = useRef();
    const setValue = () => document.querySelector('#input').value = 'value';
    const getValue = () => console.log(input.current.value);
    
    return (
        <div>
            <input id="input" ref={input} />
            <button type="button" onClick={setValue}>set value</button>
            <button type="button" onClick={getValue}>get value</button>
        </div>
    );
}