React 受控输入值巧改指南：利用 JavaScript 轻松变更

javascript

2024-03-15 15:18:39

使用 JavaScript 巧妙更改 React 受控输入值

问题

React，作为一种声明式的 UI 库，管理组件状态依靠 props 和 state。直接使用 JavaScript 修改受控组件的 DOM 值，React 无法察觉该更改，导致表单提交时出错。

解决方法

想要使用 JavaScript 代码更改 React 受控输入值，有两种方法：

1. 利用 `ref` 属性

ref 属性让你直接访问组件的 DOM 节点，从而能够用 JavaScript 操作它。

2. 借助 `setState()` 方法

setState() 方法可更新组件的 state，进而触发 React 重新渲染，更新 DOM。

详细步骤

使用 ref 属性

import React, { useRef } from 'react';

const MyInput = (props) => {
  const inputRef = useRef(null);

  const handleChange = (e) => {
    inputRef.current.value = e.target.value;
  };

  return (
    <input ref={inputRef} onChange={handleChange} {...props} />
  );
};

在 Chrome 扩展程序或控制台中：

const input = document.querySelector('input[ref="inputRef"]');
input.value = 5;

使用 setState() 方法

import React, { useState } from 'react';

const MyInput = () => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <input onChange={handleChange} value={value} />
  );
};

在 Chrome 扩展程序或控制台中：

const input = document.querySelector('input');
input.dispatchEvent(new Event('change', { bubbles: true }));

示例代码

const inp = document.querySelector('input[ref="inputRef"]');
inp.value = 5;

const btn = document.querySelector('button[type="submit"]');
btn.click();