Reactjs 如何使用axios在React和post中更改表单输入？

我正在学习如何反应，但还不强。我使用带有表单的组件，该组件使用axios从express后端接收数据。 获取正确的数据并将其呈现在表单输入中没有问题，但我无法处理如何更改输入值和使用axios进行post。我读了一些关于handleChange（）和其他员工的文章，但这还太难了

JSON如下所示：

{
    "data": [
        {
            "_id": "5d28a6fcec97b111c2f5867d",
            "phone": "+1 (111) 111 11 11",
            "email": "shutruk@gmail.com",
            "title": "khkjhkjhkj",
            "longTitle": "lkjlkjlkjlk",
            "introTitle": "Shutruk",
            "introLongTitle": "Shutruk-Nahhunte",
            "videoLink": "khkjhkjhkj",
            "introText": "lkjlkjlkjlk",
            "__v": 0
        }
    ]
}

以下是组件：

import React, { Component } from 'react';
import axios from 'axios';

class Misc extends Component {
  state = {
    data: [],
    loading: true,
    error: false,
  }
  componentDidMount() {
    axios.get('http://localhost:5555/data')
      .then(res => {
        const data = res.data.data; // get the data array instead of object
        this.setState({ data, loading: false });
        console.log(data);
      })
      .catch(err => { // log request error and prevent access to undefined state
        this.setState({ loading: false, error: true });
        console.error(err); 
      })
  }
  render() {
    if (this.state.loading) {
      return(
        <div>
          <p> Loading... </p>
        </div>
      )
    }
    if (this.state.error || !this.state.data[0]) { // if request failed or data is empty don't try to access it either
      return(
        <div>
          <p> An error occured </p>
        </div>
      )
    }
    return (
      <form action="">
        <h2 className="center" >Change data</h2>
        <div className="center"><img src={require('../img/orn.png')} alt="" className="orn"/></div>
        <h5>Phone:</h5>
        <input type="text" value={ this.state.data[0].phone } />
        <h5>Email:</h5>
        <input type="text" value={ this.state.data[0].email } />
        <h5>Title:</h5>
        <input type="text" value={ this.state.data[0].title }/>
        <h5>Longtitle:</h5>
        <input type="text" value={ this.state.data[0].longTitle }/>
        <h2 className="center" >Intro:</h2>
        <div className="center"><img src={require('../img/orn.png')} alt="" className="orn"/></div>
        <h5>Title:</h5>
        <input type="text" value={ this.state.data[0].introTitle } />
        <h5>Longtitle:</h5>
        <input type="text" value={ this.state.data[0].introLongTitle } />
        <h5>Link to video:</h5>
        <input type="text" value={ this.state.data[0].videoLink } />        
        <h5>Text:</h5>
        <textarea name="" id="" cols="30" rows="10" value={ this.state.data[0].introText }></textarea>
        <button type="submit" className="btn-large waves-effect waves-light xbutton">Save</button>
      </form>
    );
  }
}

export default Misc;

import React，{Component}来自'React'；
从“axios”导入axios；
类Misc扩展组件{
状态={
数据：[]，
加载：对，
错误：false，
}
componentDidMount（）{
axios.get（）http://localhost:5555/data')
。然后（res=>{
const data=res.data.data；//获取数据数组而不是对象
this.setState（{data，loading:false}）；
控制台日志（数据）；
})
.catch（err=>{//log请求错误并阻止访问未定义状态
this.setState（{loading:false，error:true}）；
控制台错误（err）；
})
}
render（）{
if（this.state.loading）{
返回(
加载

)
}
如果（this.state.error | | |！this.state.data[0]）{//如果请求失败或数据为空，也不要尝试访问它
返回(
发生了一个错误

)
}
返回(
更改数据
电话：
电邮：
标题：
长标题：
简介：
标题：
长标题：
视频链接：
正文：
拯救
);
}
}
导出默认杂项；

---

（非常感谢您的帮助！）

以下是您可以做到的方法

handleChange(key, value){
   const data = this.state.data;
   data[0][key] = value;
   this.setState({data});
}

handleSubmit(){
 // You can make post call here.
}

render() {
    if (this.state.loading) {
      return(
        <div>
          <p> Loading... </p>
        </div>
      )
    }
    if (this.state.error || !this.state.data[0]) { // if request failed or data is empty don't try to access it either
      return(
        <div>
          <p> An error occured </p>
        </div>
      )
    }
    return (
      <form action="" onSubmit={this.handleSubmit.bind(this)}>
        <h2 className="center" >Change data</h2>
        <div className="center"><img src={require('../img/orn.png')} alt="" className="orn"/></div>
        <h5>Phone:</h5>
        <input type="text" value={ this.state.data[0].phone } onChange={this.handleChange.bind(this, "phone")}/>//Here you have to pass key in this case it's phone
        <h5>Email:</h5>
        <input type="text" value={ this.state.data[0].email } />
        <h5>Title:</h5>
        <input type="text" value={ this.state.data[0].title }/>
        <h5>Longtitle:</h5>
        <input type="text" value={ this.state.data[0].longTitle }/>
        <h2 className="center" >Intro:</h2>
        <div className="center"><img src={require('../img/orn.png')} alt="" className="orn"/></div>
        <h5>Title:</h5>
        <input type="text" value={ this.state.data[0].introTitle } />
        <h5>Longtitle:</h5>
        <input type="text" value={ this.state.data[0].introLongTitle } />
        <h5>Link to video:</h5>
        <input type="text" value={ this.state.data[0].videoLink } />        
        <h5>Text:</h5>
        <textarea name="" id="" cols="30" rows="10" value={ this.state.data[0].introText }></textarea>
        <button type="submit" className="btn-large waves-effect waves-light xbutton">Save</button>
      </form>
    );
  }
}

handleChange（键、值）{
const data=this.state.data；
数据[0][键]=值；
this.setState（{data}）；
}
handleSubmit（）{
//你可以在这里投递。
}
render（）{
if（this.state.loading）{
返回(
加载

)
}
如果（this.state.error | | |！this.state.data[0]）{//如果请求失败或数据为空，也不要尝试访问它
返回(
发生了一个错误

)
}
返回(
更改数据
电话：
//在这里，你必须传递钥匙在这种情况下，它的电话
电邮：
标题：
长标题：
简介：
标题：
长标题：
视频链接：
正文：
拯救
);
}
}

---

您可以在表单控件上阅读更多内容，下面是您的操作方法

handleChange(key, value){
   const data = this.state.data;
   data[0][key] = value;
   this.setState({data});
}

handleSubmit(){
 // You can make post call here.
}

render() {
    if (this.state.loading) {
      return(
        <div>
          <p> Loading... </p>
        </div>
      )
    }
    if (this.state.error || !this.state.data[0]) { // if request failed or data is empty don't try to access it either
      return(
        <div>
          <p> An error occured </p>
        </div>
      )
    }
    return (
      <form action="" onSubmit={this.handleSubmit.bind(this)}>
        <h2 className="center" >Change data</h2>
        <div className="center"><img src={require('../img/orn.png')} alt="" className="orn"/></div>
        <h5>Phone:</h5>
        <input type="text" value={ this.state.data[0].phone } onChange={this.handleChange.bind(this, "phone")}/>//Here you have to pass key in this case it's phone
        <h5>Email:</h5>
        <input type="text" value={ this.state.data[0].email } />
        <h5>Title:</h5>
        <input type="text" value={ this.state.data[0].title }/>
        <h5>Longtitle:</h5>
        <input type="text" value={ this.state.data[0].longTitle }/>
        <h2 className="center" >Intro:</h2>
        <div className="center"><img src={require('../img/orn.png')} alt="" className="orn"/></div>
        <h5>Title:</h5>
        <input type="text" value={ this.state.data[0].introTitle } />
        <h5>Longtitle:</h5>
        <input type="text" value={ this.state.data[0].introLongTitle } />
        <h5>Link to video:</h5>
        <input type="text" value={ this.state.data[0].videoLink } />        
        <h5>Text:</h5>
        <textarea name="" id="" cols="30" rows="10" value={ this.state.data[0].introText }></textarea>
        <button type="submit" className="btn-large waves-effect waves-light xbutton">Save</button>
      </form>
    );
  }
}

handleChange（键、值）{
const data=this.state.data；
数据[0][键]=值；
this.setState（{data}）；
}
handleSubmit（）{
//你可以在这里投递。
}
render（）{
if（this.state.loading）{
返回(
加载

)
}
如果（this.state.error | | |！this.state.data[0]）{//如果请求失败或数据为空，也不要尝试访问它
返回(
发生了一个错误

)
}
返回(
更改数据
电话：
//在这里，你必须传递钥匙在这种情况下，它的电话
电邮：
标题：
长标题：
简介：
标题：
长标题：
视频链接：
正文：
拯救
);
}
}

---

您可以在form control上阅读更多内容，React和Vue/Angular之间的主要区别之一是侧重于单向数据绑定。当您向输入组件提供

值

直通状态时，当发生更改时，这些组件本身无法更新您的状态

从：

在HTML中，表单元素（如

、

和

等）通常维护自己的状态，并根据用户输入进行更新。在React中，可变状态通常保存在组件的state属性中，并且仅使用

setState（）

更新

我们称之为受控组件。组件状态是真理的唯一来源，状态只能通过

setState

进行显式更改。正如您所说，您通常会在变更处理程序中执行此操作：

类MyForm扩展了React.Component{
状态={
名称：“”
};
handleChange=（evt）=>{
//evt是一个变化事件
这是我的国家({
名称：evt.target.value，
});
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））
React和Vue/Angular的主要区别之一是侧重于单向数据绑定。当您向输入组件提供
值
直通状态时，当发生更改时，这些组件本身无法更新您的状态

从：

在HTML中，表单元素（如
、
和
等）通常维护自己的状态，并根据用户输入进行更新。在React中，可变状态通常保存在组件的state属性中，并且仅使用
setState（）
更新

我们称之为受控组件。组件状态是真理的唯一来源，状态只能通过
setState
进行显式更改。正如您所说，您通常会在变更处理程序中执行此操作：


类MyForm扩展了React.Component{
状态={
名称：“”
};
handleChange=（evt）=>{
//evt是一个变化事件
这是我的国家({
名称：evt.target.value，
});
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））

退房退房