reactjs - 使用 rsuite 库时输入值显示未定义（读取“值”）

Question

基本上是rsuite@4.10.2版本

const [user, setuser] = useState('')
<InputGroup>
      <Input type='text' value={user} onChange={e=>{setuser(e.target.value)}} id="user"/>
          <InputGroup.Button>
                 <Icon icon="user" />
          </InputGroup.Button>
  </InputGroup>

我也提供了错误图像，只需看看这个 在此处输入图像描述

Answer 1

rsuite 库直接在 onChange 函数中返回值。所以与其：

onChange={e=>{setuser(e.target.value)}}

你应该写

onChange={value=>{setuser(value)}}

这是我用 rsuite / bootstrap 和基本输入编写的一个类。您可以看到差异并复制/粘贴您想要的部分。

import React, { useState } from 'react';

import { InputGroup, Input } from 'rsuite';

import InputGroupBoostrap from 'react-bootstrap/InputGroup';
import FormControlBoostrap from 'react-bootstrap/FormControl';

const Question2 = () => {

  const [user, setUser] = useState('example');
  return (
    <>
      {/* rsuite */}
      <InputGroupBoostrap>
        <Input type='text' value={user} onChange={value=>{ setUser(value)}} id="user"/>
        <InputGroup.Button>
          Button
        </InputGroup.Button>

      {/* Bootstrap */}
      </InputGroupBoostrap>
        <InputGroupBoostrap>
        <InputGroupBoostrap.Text>User 1</InputGroupBoostrap.Text>
        <FormControlBoostrap value={user} onChange={(e) => { setUser(e.target.value); }} placeholder="user" />
      </InputGroupBoostrap>

      {/* input */}
      <div>
        <span>User 2</span>
        <input value={user} onChange={(e) => { setUser(e.target.value); }}/>
      </div>
    </>
  );
}

export default Question2;

我希望我有所帮助