Question

提交表格时，我正在尝试更新状态。但是，当我提交状态时显示date：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>

Answer 1

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

Answer 2

在事件处理程序@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE, WindowManager.LayoutParams.FLAG_SECURE); }中，handleSummit是e.target，而form是输入元素。这就是为什么您看到e.target.date的原因。

根据您的描述，我认为这是您想要的：

[object HTMLInputElement]

您要阅读日期，而不是在表单提交处理程序中更改日期。

Answer 3

Thread.sleep(1_000)

Answer 4

提交表单时，您无需在状态中再次设置日期。其状态已经存在，因为您已经在处理日期输入的onChange事件（否则，您将不会在文本框中首先看到所选的日期）。

所以我想您只需要在表单Submit事件中调用API并获取所需的图像即可。如果获取的是URL，则可能要将其存储在状态变量中。如果是这种情况，请将图片网址设置为提交状态。

this.setState（{... this.state，imageUrl：'http://your-url.com'}）;

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

4 个答案: