js 赋值 react input的输入框

js 赋值 react input的输入框

    javascript:(function () {
        setNativeValue = function (qs, value) {
            const element = document.querySelector(qs);
            const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
            const prototype = Object.getPrototypeOf(element);
            const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
            if (valueSetter && valueSetter !== prototypeValueSetter) {
                prototypeValueSetter.call(element, value)
            } else {
                valueSetter.call(element, value)
            }
            element.dispatchEvent(new Event('input', {bubbles: true}))
        };
        setNativeValue('#basic_username', 'Hello World');
    })();
### 实现可正常修改的 Input 组件 为了确保 `input` 输入框能够被正确赋值并允许后续编辑,在 React 应用程序中应当遵循特定的设计模式。当遇到输入框初始赋值后无法再更改的情况时,通常是由于状态管理不当引起的。 #### 使用受控组件方式处理输入框 通过定义一个由组件内部维护的状态来控制 `<input>` 的值是最常见的做法之一。每当用户键入新字符时,都会触发 onChange 事件处理器更新该状态变量,并同步到视图上显示出来[^1]。 ```jsx import React from 'react'; class EditableInput extends React.Component { constructor(props) { super(props); // 初始化 state 中保存 input 的 value 值 this.state = { inputValue: props.defaultValue || '' }; } handleChange(event) { const newValue = event.target.value; this.setState({ inputValue: newValue }); } render() { return ( <input type="text" value={this.state.inputValue} onChange={(e) => this.handleChange(e)} /> ); } } export default EditableInput; ``` 此方法利用了 React 的单向数据流特性,使得父级组件可以通过传递默认值的方式初始化子组件内的表单项;而子组件则负责监听用户的交互行为并通过 setState 来改变自身的状态,从而达到双向绑定的效果[^3]。 另外需要注意的是如果要动态设置输入框的内容,则应该调用 setState 方法而不是直接操作 DOM 或者尝试手动修改 ref 对象指向的实际节点属性[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值