Question

我有4个反应组件，分别称为A，B，C和D。A是父组件，B，C和D是放置在组件A中的子组件。每个组件都会产生数据（用户输入），但是放置在父组件（组件A）中的提交按钮/操作。然后，来自所有组件的所有数据将被发送到一个名为http://localhost:8000/create_data的API中。之所以将其发送到一个API中，是因为我想先处理所有数据，然后输入到数据库中。

第一种方法：提交按钮是一个onClick事件，它在componentA中执行setState

state = {
    instruction: 'not submit'
}

instruction = () => {
    this.setState({
        instruction: 'submit'
    })
}

<componentB instruction={this.state.instruction}/>
<componentC instruction={this.state.instruction}/>
<componentD instruction={this.state.instruction}/>
<Button type="button" color="primary" onClick={this.instruction}>Submit</Button>

然后，在每个子组件中，我创建componentWillReceiveProps（），如下所示：

componentWillReceiveProps = (val) => {
    const messages = 'this is from componentB';
    if (val.instruction === 'submit') {
        axios.post('http://localhost:8000/create_data', {
            value: messages
        })
    }
}

在服务器中，

app.post('/create_data', (req, res) => {
    console.log(req.body.value)
    // this single console log print three value:
    // this is from componentB
    // this is from componentC
    // this is from componentD
    // I dont know how to separate them
})

第二种方法：我试图再给每个孩子传递一个道具，这是一项功能。因此，当this.state.instruction更改为“ submit”时，我调用了props函数并将值从子级传递给父级。我得到了值，但是然后，由于我将三个不同的函数作为道具传递给每个组件，因此我想将其发送到一个API中。

还有其他更好的方法可以实现吗？预先感谢

Answer 1

您做错了一切，下面是实现尝试实现的更好方法；

class A extends Component {

   state = {
       messages: {
          b:'',
          c:'',
          d: ''
        }
     }

    handleSubmit = () => {
        const { messages } = this.state
        // you could check if messages is not empty before sending
        axios.post('http://localhost:8000/create_data', {
        value: messages
       })
     }

    handleMessageChange = (name, message) => {
       // perform validations on message before adding it to state
       const {messages} = this.state
       this.setState({messages: {...messages, [name]:message}})
     }

  render(){
    const {messages} = this.state
    const b='b'
    const c='c'
    const d='d'
    return(
       <div>
        <componentB 
          message={message[b]} 
          name={b} 
          onChange={this.handleMessageChange}
         />
        <componentC 
          message={message[c]} 
          name={c} 
          onChange={this.handleMessageChange}
         />
        <componentD 
          message={message[d]} 
          name={d} 
          onChange={this.handleMessageChange}
         />

         <Button 
           type="button" 
           color="primary" 
           onClick={this.handleSubmit}>
           Submit
         </Button>
       </div>
       )
      }

您的组件B，C和D如下所示；

      class ComponentD extends {

         handleChange = (event) => {

             const {name, value} = event.target
             this.props.onChange(name, value)
           }

          render() {
            const {message, name} = this.props
            return(
               <input 
                 name={name} 
                 value={message} 
                 onChange={this.handleChange}
               />
            )
           }
         }

如果子组件具有多个输入，则可以执行以下操作

Child component EF

      class ComponentEF extends {

     handleChange = (event) => {

         const {name, value} = event.target
         this.props.onChange(name, value)
       }

      render() {
        const {messages:{e,f}} = this.props
        return(
          <React.Fragment>
           <input 
             name="e" 
             value={e} 
             onChange={this.handleChange}
           />
           <input 
             name="f" 
             value={f} 
             onChange={this.handleChange}
           />
         </React.Fragment>
        )
       }
     }

In the parent component

  render(){
     const {messages:{b,c,d,...rest}} = this.state
    return(
        <div>
          <componentB 
            message={b} 
            name={"b"} 
            onChange={this.handleMessageChange}
          />
         <componentC 
            message={c} 
            name={"c"} 
            onChange={this.handleMessageChange}
         />
         <componentD 
            message={d} 
            name={"d"} 
            onChange={this.handleMessageChange}
         />
          <componentEF
            messages={rest} 
            onChange={this.handleMessageChange}
         />

         <Button 
           type="button" 
           color="primary" 
           onClick={this.handleSubmit}>
            Submit
         </Button>
   </div>
   )
  }

Answer 2

最有可能是绑定问题。尝试<Button type="button" color="primary" onClick={this.instruction.bind(this)}>Submit</Button>

从多个React子获取数据并发送到一个API

2 个答案: