输入标签 onChange 返回未定义的值答案

【问题标题】：Input tag onChange returning undefine value输入标签 onChange 返回未定义的值
【发布时间】：2021-05-16 08:15:50
【问题描述】：

我一直被困在一个问题上，即从输入字段中获取输入文本字段。本质上，我想创建一个搜索功能来获取文本并进一步处理它。信息请参考代码，返回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;

【问题讨论】：

标签： javascript reactjs react-hooks rsuite

【解决方案1】：

在 handleInputChange 函数的开头有一个 ;。

Input from 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

【讨论】：

你是个传奇，伙计！非常感谢
?...感谢您的回复...总是很乐意提供帮助。?

【解决方案2】：

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

【讨论】：

谢谢丹尼尔，我仍然遇到同样的问题
TypeError: Cannot read property 'value' of undefined App.handleInputChange 29 | 30 | handleInputChange(event){; 31 | > 32 | this.setState({inputValue: event.target.value}); | ^ 33 | }; 34 | 35 | render(){ View compiled ▶ 20 stack frames were collapsed.
在{ 之后的handleInputChange 中有一个;