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

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

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

class Input extends Component {
    state = { 
        tagged: false,
        message: '', 
    }

    handleClick(e) {
        this.setState({tagged: true});
        e.preventDefault();
        console.log('The link was clicked.');
    }

    render() {                                                
        return (
            <div id="id" style={divStyle}>
                <p> hello </p>
                <input
                    style = {textStyle}
                    placeholder="user@email.com" 
                    type="text">
                </input>

                <input
                    style = {textStyle}
                    placeholder="tag" 
                    type="text">
                </input>
                <button
                    onClick={(e) => this.handleClick(e)}
                    style={buttonStyle}>
                    {this.state.tagged ? 'Tagged' : 'Tag ' } 
                </button>

                <p>
                    {this.state.tagged ? 'Clicked' : 'Still' }
                </p>
            </div>    
        )
    }
}

类输入扩展组件{
状态={
标签：假，
消息：“”，
}
handleClick（e）{
this.setState（{taged:true}）；
e、 预防默认值（）；
log（'已单击链接'）；
}
render（）{
返回(
你好

this.handleClick（e）}
样式={buttonStyle}>
{this.state.taged？'taged'：'Tag'}

{this.state.taged？'Clicked'：'Still'}

)
}
}

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

class Input extends Component {
    state = { 
        tagged: false,
        message: '',
        input1: '',
        input2: '',
    }

    handleClick(e) {
        // access input values in the state
        console.log(this.state) // {tagged: true, input1: 'text', input2: 'text2'}
        this.setState({tagged: true});
        e.preventDefault();
        console.log('The link was clicked.');
    }

    handleInputChange = (e, name) => {
      this.setState({
       [name]: e.target.value
     })
    }

    render() {                                                
        return (
            <div id="id" style={divStyle}>
                <p> hello </p>
                <input
                    style = {textStyle}
                    placeholder="user@email.com" 
                    type="text"
                    onChange={(e) => this.handleInputChange(e, 'input1')}
                >
                </input>

                <input
                    style = {textStyle}
                    placeholder="tag" 
                    type="text"
                   onChange={(e) => this.handleInputChange(e, 'input2')}
               >
                </input>
                <button
                    onClick={(e) => this.handleClick(e)}
                    style={buttonStyle}>
                    {this.state.tagged ? 'Tagged' : 'Tag ' } 
                </button>

                <p>
                    {this.state.tagged ? 'Clicked' : 'Still' }
                </p>
            </div>    
        )
    }
}

类输入扩展组件{
状态={
标签：假，
消息：“”，
输入1:“”，
输入2:“”，
}
handleClick（e）{
//访问状态中的输入值
console.log（this.state）/{taged:true，input1:'text'，input2:'text2'}
this.setState（{taged:true}）；
e、 预防默认值（）；
log（'已单击链接'）；
}
handleInputChange=（e，name）=>{
这是我的国家({
[名称]：e.target.value
})
}
render（）{
返回(
你好

this.handleInputChange（e，'input1'）}
>
this.handleInputChange（e，'input2'）}
>
this.handleClick（e）}
样式={buttonStyle}>
{this.state.taged？'taged'：'Tag'}

{this.state.taged？'Clicked'：'Still'}

)
}
}

使用

react

输入有两种不同的方法-您可以使它们

受控

或

非受控

。当您说

fetch

text from

input

s时，这称为非受控组件，这意味着表单数据由DOM本身而不是react处理

这是通过使用

ref

来实现的，并在需要时获取输入的引用和值。您可以在中阅读有关此方法的更多信息

根据，建议使用

受控

组件

在大多数情况下，我们建议使用受控 实现表单的组件。以受控的方式 组件，表单数据由React组件处理

这意味着您不使用对输入的引用，而是使用事件处理程序处理输入的更改，并使用用户在输入字段中输入的新值更新

state

。以下是

react

如何处理

form

和受控组件：

反应组分 呈现表单还可以控制后续操作中该表单中发生的操作 用户输入。其值由React以这种方式控制的输入表单元素称为“受控组件”

在您的情况下，如果选择受控输入，则可以执行此操作：

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>
    )
  }
}

单击按钮时，您将实际从输入中获取值

我做了一个双向的工作示例

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>
    )
  }    
}