javascript - 无法管理 Reactjs 上未填写的字段

Question

我正在reactjs中制作一个动态表单。但我有一个恼人的问题。我只想发送已填写的表格字段。

为此，我使用了这段代码，它允许我下载所有未填充的数据。 在全局范围内，我的发送部分代码是

async handleSubmit(event) {
  this.setState({ loading: true });

  setTimeout(() => {
   this.setState({ loading: false });
  }, 2000);

 event.preventDefault();
 const {
   name_contact='', name_contact1='', endfr='', endfr_1='',
 } = this.state;

 Object.keys(this.state).forEach(key => {
 if (!this.state[key]) delete this.state[key];
 })

 await axios.post(
  ' MY_endpoint API',
  {
    name: `${name_contact},${name_contact_1} `,end: `${endfr},${endfr_1});
  }

在这段代码中，我从 this.state 中删除了 null 数据，以删除其中没有任何内容的变量。

但我的问题是我不知道如何处理 axios.get 中字段为空的事实。 我希望能够从 get.axios 中删除已被

删除的变量

    Object.keys(this.state).forEach(key => {
 if (!this.state[key]) delete this.state[key];
 })

例如，如果我不填写 name_contact_1 字段，我希望 axios.get 为

    await axios.post(
  ' MY_endpoint API',
  {
    name: `${name_contact}`,end: `${endfr},${endfr_1});
  }

或者如果我没有在 endfr 中添加任何内容

await axios.post(
  ' MY_endpoint API',
  {
    name: `${name_contact},${name_contact_1} `,end: `${endfr_1});
  }

所以我的问题是:有人知道我该如何处理这个问题吗？ (以我的代码结构可能不行) 我不确定我是否说得足够清楚，但如果不够清楚，请告诉我，我会确保更改它。

PS:我的完整代码

  export default class FormPage extends Component {
     constructor(props) {
      super(props);
      this.state = initialState;
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleChange = this.handleChange.bind(this);
     }

     showMessage = (bool) => {
      setTimeout(() => {
       this.setState({
        showMessage: true
       });
      }, 2000);
     if (this.state.Showing) return;
      this.setState({ Show: true, Showing: true });
     setTimeout(() => {
      this.setState({ Show: false, Showing: false });
      }, 2000);
     }

     showMessageFalse = (bool) => {
      this.setState({
       showMessage: false
       });
      this.setState(initialState);
     }

     handleChange(event) {
      const InputValue = event.target.value;
      const stateField = event.target.name;
      this.setState({
        [stateField]: InputValue,
      });
      console.log(this.state);
     }

     async handleSubmit(event) {
      this.setState({ loading: true });

      setTimeout(() => {
       this.setState({ loading: false });
      }, 2000);

     event.preventDefault();
     const {
       name_contact='',
     } = this.state;
           Object.keys(this.state).forEach(key => {
 if (!this.state[key]) delete this.state[key];
 })
     await axios.post(
      ' MY_endpoint API',
      {
        name: `${name_contact}`);
      }

  render() {

    const { loading } = this.state;

    return (
      <div>

        <ExpansionPanel title="Contacts" expandedTitle="Contacts" titleIcon="done_all" ><div>
          <Container>
            <div id="normal"><label id='title2'>Detail du contact</label></div><br/>
              <Row align="center">
                <Col id= "color" sm={3}> <label> Name: </label></Col> <Col id= "color" sm={3}><Input placeholder="Nom complet" type="string" name="name_contact" value={this.state.name_contact} onChange={this.handleChange}/><br /> </Col>
              </Row>
          </Container>
          </div>
        </ExpansionPanel>

      <form onSubmit={this.handleSubmit}>
      <br /><br /><div id="deb"><Button type="submit" value="Show" onClick={this.showMessageFalse.bind(null, true)} > Update </Button></div>
      </form>
    </div>
    );
  }
}

Answer 1

首先，您需要了解，当您分配值时 const {name_contact=''} = this.state; 然后您稍后删除 this.state[' name_contact']，就像您上面所做的那样，您实际上并没有更改 name_contact 变量的值。您更改了状态内部的值，但未更改值本身。

其次，javascript 无法神奇地为您创建 name 字符串，仅当有 2 个值时才使用逗号。您必须编写一个函数来执行此操作。

类似 var name = [name_contact, name_contact1].filter(v =>v).join(','); .filter 函数会删除数组中的空值， .join 将其转换为值之间用逗号分隔的字符串

所以你最终会得到更像这样的东西:

async handleSubmit(event) {
  this.setState({ loading: true });

  setTimeout(() => {
   this.setState({ loading: false });
  }, 2000);

 event.preventDefault();
 const {
   name_contact='', name_contact1='', endfr='', endfr_1='',
 } = this.state;


 const name = [name_contact, name_contact1].filter(v =>v).join(',');
 const end = [name_contact, name_contact1].filter(v =>v).join(',');

 await axios.post(
  ' MY_endpoint API',
  {
    name, end
  })
}