时间戳

首页 > 解决方案 > 反应：如何编辑表单？

reactjs - 反应：如何编辑表单？

问题描述

我正在使用 localStorage 来存储表单详细信息。安装组件后，我在控制台中获取数据。如何在表单中显示数据并进行编辑？我已经设置了编辑状态，但我没有得到如何实现这一点，以便预填充这些值？

这是代码：

class MileStoneForm extends Component {
    constructor(props){
        super(props)
        this.state={
                deliverable_name:"",
                due_date:"",
                deliverable_notes:"",
                milestone_based_payment:false,
                deliverable_name_error:"",
                due_date_error:"",
                deliverable_notes_error:"",
                percent_rate:0,
                percent_rate_error:"",
                due_date_select:false,
                edit:false,
                milestonedata:null;
        }
    }
    
    componentDidMount(){
        let milestonedata=JSON.parse(localStorage.getItem('mileStoneData'))
        console.log(milestonedata)
        if(this.state.edit===true){
            this.setState({
                milestonedata:milestonedata
            },()=>{this.setEditMileStoneData()})
        }
    }

    setEditMileStoneData=()=>{
        const {milestonedata}=this.state
        let data={
            deliverable_name:milestonedata.milestoneName,
            deliverable_notes:milestonedata.description,
            due_date:milestonedata.dueDate,
            milestone_based_payment:milestonedata.isMilestoneBasedPayment,
            percent_rate:milestonedata.percentageRate
        }
        this.setState({...data})
    }

handleSubmit=()=>{
        const {deliverable_name,deliverable_name_error,deliverable_notes,deliverable_notes_error,
            due_date,due_date_error,milestone_based_payment,percent_rate}=this.state
        let pass=true
        if(pass){
            let data={
                    description: deliverable_notes,
                    dueDate: due_date,
                    isDeleted: false,
                    isMilestoneBasedPayment: milestone_based_payment,
                    milestoneName: deliverable_name,
                    percentageRate: percent_rate,
            }
            console.log(data)
            this.props.handleData(data)  
            localStorage.setItem('mileStoneData',JSON.stringify(data))
            this.setState({
                deliverable_name:'',
                deliverable_name_error:'',
                deliverable_notes:'',
                deliverable_notes_error:'',
                milestone_based_payment:false,
                percent_rate:'',
                due_date:'',
                due_date_error:''
            })   
        }
    } 
   export default MileStoneForm

标签： reactjs

解决方案

您应该查看 React 文档中的“受控组件”部分。

其背后的想法是：

  1. 您为表单创建一个状态对象。
  2. 您将每个表单字段的状态添加为其值
  3. 您添加一个函数来onChange更新饱和度。
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

推荐阅读