2

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

2 回答 2

3

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

Inputfromrsuite直接返回值 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

于 2021-05-16T08:26:08.723 回答
1

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

于 2021-05-16T08:21:19.647 回答