Question

我是React的新手，试图编写一个非常简单的项目来获取两个文本框的输入，当单击按钮时，文本框中的“数据”将打印在段落上。

单击按钮时，如何在输入文本框中获取文本？

require.invoke(Clojure.read("clj.p1.core"));

Answer 1

您可以在每个输入中添加onChange事件处理程序。

data.table::rbindlist(lapply(zt.detail, function(x) {
       x[] <- lapply(x, function(y) if(is.data.frame(y)) NA else y)
      x}))
#    id phone realName addr source registerDate type remain
#1: 123 00001     Eric   NA     NA           NA    0     NA
#2: 456 00002      Amy   NA     NA           NA    0    100

Answer 2

There are two different ways of working with react inputs - you can either make them controlled or uncontrolled. When you say fetch text from inputs, this is called uncontrolled components and means that form data is handled by the DOM itself and not by react.

This is achieved by using ref and literally getting a reference to your input and fetching its value when you need it. you can read more about this approach in react docs.

According to react docs, it is recommended using controlled components

In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component.

This means that you don’t use references to the inputs and instead handle changes of your inputs with an event handler and update state with the new values that the user has entered into the input fields. According to react docs here is how react handles form with controlled components:

the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.

In your case you can do this if you choose controlled inputs:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tagged: false,
      firstInput: '',
      secondInput: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
  handleClick(e) {
    this.setState({ tagged: true });
    e.preventDefault();
    console.log('The link was clicked.');
  }

  render() {
    const { firstInput, secondInput, tagged } = this.state;
    return (
      <div id="id">
        {tagged && <p>{firstInput} {secondInput}</p> }
        <input 
          value={firstInput} 
          name="firstInput"
          onChange={this.handleChange} 
          type="text" />
        <input 
          value={secondInput} 
          name="secondInput"
          onChange={this.handleChange}
          type="text" />
        <button onClick={(e) => this.handleClick(e)}>
          {tagged ? 'Tagged' : 'Tag '}
        </button>
      </div>
    )
  }
}

Here you put the inputs' values on state and update state when the user writes something in your inputs. If you however want to use uncontrolled components you can do it this way:

class UncontrolledInput extends React.Component {
  state = {
    tagged: false,
    message: '',
  }

  handleClick(e) {
    e.preventDefault();
    const messageFromInputs = `${this.firstInput.value} ${this.secondInput.value}`;
    this.setState({ tagged: true, message: messageFromInputs });   
  }

  render() {
    return (
      <div id="id">
        <p>{this.state.message}</p>
        <input ref={(input) => this.firstInput = input} type="text" />
        <input ref={(input) => this.secondInput = input} type="text" />
        <button onClick={(e) => this.handleClick(e)}>
          {this.state.tagged ? 'Tagged' : 'Tag '}
        </button>
        <p>
          {this.state.tagged ? 'Clicked' : 'Still'}
        </p>
      </div>
    )
  }    
}

Here you will actually fetch values from your inputs when the button is clicked.

I made a working example with both ways on codesandbox.

如何从文本框中获取输入并在React中打印？

2 个答案: