输入标签 onChange 返回未定义值

如何解决输入标签 onChange 返回未定义值

我一直被困在从输入字段中获取输入文本字段的一个问题上。本质上，我想做一个搜索功能来获取文本并进一步处理它。 信息请参考代码，返回的div在底部。

import React from 'react';
import ReactDOM from 'react-dom';
import { useState,useEffect } from 'react';

import { Input,InputGroup,Icon} from 'rsuite';
import { Button,IconButton,ButtonGroup,ButtonToolbar } from 'rsuite';
import './App.css';
import Search from './search.js';

// import default style
import 'rsuite/dist/styles/rsuite-default.css';
import { render } from 'react-dom';
const styles = {
  marginBottom: 10
};
const center = {
  padding: '25% 25% 25%' 
}
class App extends React.Component {

  constructor(props){
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);

    this.state = {
      inputValue: 'nothing'
    }
  }

  handleInputChange(event){;

    this.setState({inputValue: event.target.value});
  };

  render(){
        return (
          <div >
            <div style={center} >
                <InputGroup style={styles}> <Input size="md" value={this.inputValue} onChange={(e) => this.handleInputChange(e)} /><InputGroup.Addon>
                <Button appearance="default"><Icon icon="search" /></Button>
                </InputGroup.Addon>
              </InputGroup>
            
            </div>
            
          </div>
        )
      }
}

export default App;

解决方法

; 函数的开头有一个 handleInputChange。

来自 Input 的

rsuite 直接返回 onChange 值，但您指的是 e.target.value。

而且值应该是 this.state.inputValue

这是解决方案。

handleInputChange(value) {
    console.log("values>>>>",value);
    this.setState({ inputValue: value });
  }

  render() {
    return (
      <div>
        <div style={center}>
          <InputGroup style={styles}>
            {" "}
            <Input
              size="md"
              value={this.state.inputValue}
              onChange={(e) => this.handleInputChange(e)}
            />
            <InputGroup.Addon>
              <Button appearance="default">
                <Icon icon="search" />
              </Button>
            </InputGroup.Addon>
          </InputGroup>
        </div>
      </div>
    );
  }
}

你也可以参考https://codesandbox.io/s/zen-field-njxn0?file=/src/App.js:590-1213

,

你的问题很简单。您正在设置 value={this.inputValue}，但您应该使用 value={this.state.inputValue}。因为 this.inputValue 不存在，所以您的值被设置为 undefined。使用 value={this.state.inputValue} 应该可以解决您的问题。