React 基础面试题, React 中如何为非受控组件设置默认值?

Step 1

Q:: React 中如何为非受控组件设置默认值？

A:: 在 React 中，非受控组件的默认值可以通过使用 HTML 元素的默认属性来设置。例如，<input> 元素的默认值可以通过 defaultValue 属性来设置，<textarea> 和 <select> 元素也有类似的 defaultValue 属性。这些属性在组件首次渲染时会被应用，但之后组件的状态不会被 React 管理。因此，非受控组件的值会随着用户的输入改变而改变，而不是通过 React 的状态管理。

Step 2

Q:: 什么是受控组件和非受控组件？它们有什么区别？

A:: 受控组件是指在 React 中，其值由 React 的状态(state)管理，任何对输入的更改都会触发事件处理程序来更新状态，从而导致组件重新渲染。受控组件需要通过 onChange 事件处理输入的变化。非受控组件则依赖于 DOM 本身来存储状态，使用 ref 来访问 DOM 元素以读取其当前值。受控组件更适合复杂的表单处理，而非受控组件则在需要直接访问底层 DOM 的场景中更为有用。

Step 3

Q:: React 中如何使用 ref 来操作非受控组件？

A:: 在 React 中，可以使用 ref 来访问非受控组件的 DOM 元素，从而读取或操作其当前值。首先，通过 React.createRef() 创建一个 ref 对象，然后将这个对象通过 ref 属性赋给组件。之后可以通过 this.ref.current 来访问该组件的 DOM 元素。例如，对于一个 <input> 元素，可以通过 this.ref.current.value 来获取当前输入的值。