如何更改在 React 中提交表单的状态？答案

【问题标题】：How can I change the state submitting a form in React?如何更改在 React 中提交表单的状态？
【发布时间】：2019-08-03 04:06:13
【问题描述】：

我在提交表单时尝试更新状态。但是，当我提交状态时显示日期：HTMLInputElement

我打算使用提交的日期显示来自 NASA api 的那天的图片。

我是 React 新手，所以我仍在努力理解它。

但是 date 属性的状态不应该显示我在控制台中提交表单的日期吗？

class DisplayContent extends React.Component {
    constructor(props){
        super(props)

    this.state = {
        date: ''
    }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleSubmit(e){
        e.preventDefault()
        this.setState({ date: e.target.date })
    }
       handleChange(e){
        this.setState ({
              date: e.target.value
     })
    }   
    render(){
        return(
            <div className='container'>
            <h1>NASA Picture of the Day</h1>
            <h3>Enter a date and you'll see NASA's picture from that day</h3>
            <form onSubmit={this.handleSubmit}>
            (YYYY-MM-DD):
                <input 
                type='text'
                id='date'
                placeholder='input date'
                value={this.state.date}
                onChange={this.handleChange}
                />
                <button 
                type='submit'
                disabled={!this.state.date}
                >
                Submit
                </button>
            </form>
           </div>

【问题讨论】：

标签： reactjs create-react-app

【解决方案1】：

handleSubmit(e) {
 this.setState({
   date: e.target[0].value
 });
}

【讨论】：

【解决方案2】：

在事件处理程序handleSummit中，e.target是form，e.target.date是输入元素。这就是你看到[object HTMLInputElement]的原因。

根据你的描述，我想这就是你想要的：

 handleSubmit(e) {
     e.preventDefault();
-    this.setState({date: e.target.date})
+    console.log(this.state.date);
 }

您想读取日期而不是更改表单提交处理程序中的日期。

【讨论】：

【解决方案3】：

 class DisplayContent extends React.Component {

       state = {
           date: ''
          }
       handleSubmit =(e)=>{
            e.preventDefault()
            this.setState({ date: e.target[0].value })
        }
       handleChange=(e)=>{
        this.setState ({
              date: e.target.value
        })
      }   
       render(){
           return(
              <div className='container'>
              <h1>NASA Picture of the Day</h1>
              <h3>Enter a date and you'll see NASA's picture from that day</h3>
              <form onSubmit={this.handleSubmit}>
              (YYYY-MM-DD):
                <input 
                type='text'
                id='date'
                placeholder='input date'
                value={this.state.date}
                onChange={this.handleChange}
                />
                <button 
                type='submit'
                disabled={!this.state.date}
                >
                Submit
                </button>
            </form>
           </div>
    }
}

【讨论】：

【解决方案4】：

在提交表单的状态下不需要再次设置Date。它已经处于状态，因为您已经在处理日期输入的 onChange 事件（如果没有，您首先不会在文本框中看到选定的日期）。

所以我猜你只需要在表单提交事件中调用 API 并获取所需的图像。如果您正在获取一个 url，您可能希望将其存储在状态变量中。如果是这种情况，请将图片网址设置为提交中的状态。

this.setState({...this.state, imageUrl: 'http://your-url.com'});

【讨论】：