React.js - 如何设置表单提交状态？

Question

新手 React 问题 - 我在尝试遵循文档时完全搞糊涂了。

我想要一个简单的文本输入，在单击按钮时会在表单下方显示输入值。很简单吧？

到目前为止，这是我的组件：

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text"  value='' />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

但是，它根本不起作用 - 当用户键入时，表单不显示任何内容。

我做错了什么？

Answer 1

变化：

1.您需要从输入元素中删除value=''，否则它将不允许您输入任何内容，您也没有使用任何 onChange 函数。

元素的使用方式：

Controlled Component: 定义一个 onChange 函数和 value 属性，并在该 change 函数中更新该值。

Uncontrolled Component:不要定义value属性，使用ref获取元素的值。

2. 将ref 与输入元素一起使用，在onSubmit 函数中获取它的值。

检查一下：

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: this.element.value });
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" ref={el => this.element = el} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

ReactDOM.render(<TextInput/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 2

您需要有一个受控输入，您可以在用户输入文本字段时保存该值，然后在提交时您可以从状态中获取数据。

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  onChange = (event) => this.setState({ value: event.target.value });

  handleSubmit(event) {
    event.preventDefault();
    //this.setState({ value: event.target.value });
    consoole.log(this.state.value);
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" value={this.state.value} onChange={this.onChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

这是获取用户输入的传统方式，使用受控组件。

Answer 3

你的问题出在

<input type="text"  value='' />

取出值

<input type="text" />

"value" 将在每次渲染时将内容设置为空字符串

Answer 4

使用你的句柄提交函数时，event.target 是表单元素，没有值，所以什么都没有设置。处理此问题的“反应方式”是使用称为“受控输入”的东西。看看我将如何使用您的代码实现它们：

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      value: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.updateInput = this.updateInput.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: this.state.input });
  }

  updateInput(event) {
    this.setState({input: event.target.value});
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text"  value={this.state.input} onChange={this.updateInput} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

特别注意输入的新值和我附加的更改处理程序。

Answer 5

根本不适合我！！直到我以返回的形式将 setState 放入 onChange 本身，见下文 - onChange={ e => this.setState({ name : e.target.value })}:

import React, { Component } from 'react';
import logo from '../logo.svg';
import '../App.css';

export default class Dashboard extends Component {
constructor(props){
    super(props);
    this.state = {cakes: [], name: '', review: '', rating: ''}

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
}//compdidmount

handleChange = (event) => this.setState({name: event.target.value, review: event.target.value,rating: event.target.value});

handleSubmit(e) {
    e.preventDefault();
    console.log('A name was submitted: ' + this.state.name + this.state.review + this.state.rating);

  }

  render() {

    const { state } = this;

 const numbers = [1, 2, 3, 4, 5];
 const listItems = numbers.map((number) =>
 // Correct! Key should be specified inside the array.
 <li key={number.toString()}
           value={number}> {number} </li>

);
    return (
      <div className="Dashboard">
        <header className="Dashboard-header">
                    Dashboard
          <h6 className="Dashboard-title">Items pulled from firebase</h6>
        </header>
        <p className="App-intro">
         Items
        </p>
        {listItems}

        <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={state.name} onChange={ e => this.setState({ name : e.target.value }) } />
        </label>
        <label>
          Review:
          <input type="text" value={state.review} onChange={ e => this.setState({ review : e.target.value }) } />
        </label>
        <label>
          Rating:
          <input type="text" value={state.rating} onChange={ e => this.setState({ rating : e.target.value }) } />
        </label>
        <input type="submit" value="Submit" />
      </form>
      </div>
    );
  }
}

Answer 6

大多数示例似乎比它们需要的复杂。这个例子来自 Codevolution 的 React 教程：

https://www.youtube.com/watch?v=x9UEDRbLhJE

class TextInput extends Component {
    constructor(props) {
        super(props)
        this.state = {
            mytext: "",
            value: ""
        }
    }

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

    submitHandler = (e) => {
        this.setState({
            value: this.state.mytext
        })
        e.preventDefault()
    }

    render() {
        return (
            <form onSubmit={this.submitHandler}>
            <label>
                <input
                name="mytext"
                type="text"
                value={this.state.mytext}
                onChange={this.changeHandler} />
            </label>
            <button
                onSubmit={this.submitHandler}
                type="submit">
                    Submit
                </button>
            <p>{ this.state.value }</p>
            </form>
        )
    }
}

form 的更改更新了state 字段，因此当您点击提交时，一切就绪。每个input 字段都是named，很容易将它们映射回state。