从React-Bootstrap输入获取数据

Question

我没有找到关于如何使用React-Bootstrap从我的输入中获取数据的好文档或视频。我希望能够单击该按钮，然后将我在输入框中键入的内容带入onClick函数。

import React    from "react";
import Button from 'react-bootstrap/Button';
import './Search.css';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';


class search extends React.Component {
    constructor(props){
      super(props);
  this.text = React.createRef(); 

  this.searchChar = this.searchChar.bind(this);
}  

searchChar = () => {
  console.log("Button Clicked")
  const value = this.input.current.value; 
  console.log(value)
}



  render() {

    return (
    <div className="searchBar">
    <form>
    <InputGroup className="mb-3">
    <InputGroup.Prepend>
      <InputGroup.Text id="basic-addon1">Character Search</InputGroup.Text>
    </InputGroup.Prepend>
    <FormControl ref = {this.input}
      placeholder="Character Name"
      aria-label="Character Name"
      aria-describedby="basic-addon1"
    />
  </InputGroup>
      <Button onClick={this.searchChar(this.input)} variant="outline-danger">Search </Button>
    </form>
    </div>
    );
  }
}

export default search;

Answer 1

只需尝试在state中写入输入值

例如：

import React    from "react";
import Button from 'react-bootstrap/Button';
import './Search.css';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';


class search extends React.Component {
    constructor(props){
      super(props);
      this.state = {
          basicAddon1 : null,
      };
}  

searchChar = () => {
  console.log("Button Clicked")
  const value = this.state.basicAddon1;
  console.log(value)
}



  render() {

    return (
    <div className="searchBar">
    <form>
    <InputGroup className="mb-3">
    <InputGroup.Prepend>
      <InputGroup.Text id="basic-addon1">Character Search</InputGroup.Text>
    </InputGroup.Prepend>
    <FormControl
      placeholder="Character Name"
      aria-label="Character Name"
      aria-describedby="basic-addon1"
      onChange={event => {
            this.setState({
               basicAddon1 : event.target.value
            });

        }} 
     value={this.state.basicAddon1 ? this.state.basicAddon1 : ""}
    />
  </InputGroup>
      <Button onClick={this.searchChar(this.input)} variant="outline-danger">Search </Button>
    </form>
    </div>
    );
  }
}

export default search;

您可以创建inputChangeHandler函数或其他东西来改进您的代码，这只是基本的

Answer 2

与在纯React中处理从表单获取数据的方式相同，使用react-bootstrap也是如此。这个answer here显示了许多这样做的选项。在这些选项中，我最喜欢的方法是这个one。使用这种方法，您的代码将类似于：

class search extends React.Component {
constructor(props) {
    super(props)
    this.handleSave = this.handleSave.bind(this)
}

onChange(event) {
    // Intended to run on the change of every form element
    event.preventDefault()
    this.setState({
        [event.target.name]: event.target.value,
    })
}

handleSave() {
    console.log(`Do something with : {this.state.characterName}`)
}

render() {
    return (
        <div className="searchBar">
            <form>
                <InputGroup className="mb-3">
                    <InputGroup.Prepend>
                        <InputGroup.Text id="basic-addon1">
                            Character Search
                        </InputGroup.Text>
                    </InputGroup.Prepend>
                    <FormControl
                        name="characterName"
                        placeholder="Character Name"
                        aria-label="Character Name"
                        aria-describedby="basic-addon1"
                        onChange={this.onChange.bind(this)}
                    />
                </InputGroup>
                <Button onClick={this.handleSave} variant="outline-danger">
                    Search{' '}
                </Button>
            </form>
        </div>
    )
}

}