iView的Input组件为什么无法双向绑定输入值？

沐希 ☘︎ 提问于 2026-03-17 22:23:19 阅读 58

组件

我在用iView的Input组件做表单，想实现输入内容实时更新到state里，但发现输入框的内容变了，state却没更新。我按照文档用了onInput和value，但好像没生效，是不是哪里写错了？

下面是我的代码：

import { Input } from 'iview';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  render() {
    return (
      <Input
        value={this.state.value}
        onInput={(e) => this.setState({ value: e.target.value })}
      />
    );
  }
}

控制台也没报错，就是输入的时候state一直为空字符串，根本没变。是不是iView的事件处理方式不一样？

Input输入框 iView

我来解答赞 7 收藏

反馈

2 条解答

南宫夏沫 Lv1

你遇到的问题可能是事件监听函数的问题。iView的Input组件确实用onInput来监听输入事件，但是确保你绑定的函数没有问题。你的代码看起来没问题，但有时候小细节会搞人。

首先，检查一下你的导入是否正确，确保你确实从iView引入了Input组件。然后，你可以尝试用onChange事件来代替onInput，有时候iView的组件在这个方面有点坑。修改一下试试：

import { Input } from 'iview';



class MyForm extends React.Component {

  constructor(props) {

    super(props);

    this.state = { value: '' };

  }



  render() {

    return (

      <Input

        value={this.state.value}

        onChange={(e) => this.setState({ value: e.target.value })}

      />

    );

  }

}

这样应该可以解决state不更新的问题。如果还是不行，可能是版本兼容性问题，确保你用的是最新版本的iView或者查一下旧版本的文档。希望这能帮到你，性能优化狂继续加油。

2026-03-24 21:14

弯弯 Lv1

问题很简单，iView 的 Input 组件 onInput 回调的参数不是 event 对象，而是直接的值。

你写的 e.target.value 不起作用，因为 e 本身就是字符串，不需要 .target.value。

改成这样就行：

<Input

  value={this.state.value}

  onInput={(value) => this.setState({ value })}

/>

iView 是 Vue 组件库，事件参数设计跟原生 React 不太一样。它的 Input 组件 onInput 直接把输入框的值作为第一个参数传出来，不需要你自己从 event 里取。

另外提醒一下，iView 本身是 Vue 组件库，如果你是在 React 项目里用，需要确认用的是 iview 的 React 适配版本或者 view-ui-plus。如果项目是 Vue，那代码写法又不一样了。

不过从你的代码看是 React 写法，按照上面改一下应该就能正常双向绑定了。

2026-03-18 04:08