Question

我想将孩子中的表单数据发送到父组件。上提交功能，我已经在父组件中编写。父组件：

    handleChangeValue = (e) => {
      this.setState({
        [e.target.name]: e.target.value,
        [e.target.value]: e.target.value
     });
   }

   handleSubmit() {
      var newObj = {
      'id' : this.state.id,
      'name' : this.state.name,
   };

   render() {
     return (
       <div className="App">
        <UsingForm onChangeValue = 
         {this.handleChangeValue} handleSubmit = {this.handleSubmit}> 
         </UsingForm>
      </div>
     );
   }

子组件是：

 <form onSubmit={this.handleSubmit}>
     <label>
      Name:
        <input type="text" name="uname" value = {this.props.uname} 
        onChange={(e)=>this.props.onChangeValue(e)}></input>
     </label>
     <label>
     ID:
      <input type="text" name="id" value = {this.props.id} onChange= 
       {(e)=>this.props.onChangeValue(e)}></input>
      </label>
      <input type="button" value="Submit" onClick= 
      {this.props.handleSubmit} />
 </form>

为什么没有在handleSubmit()中获得状态值，为什么？

Answer 1

您必须使用箭头功能绑定handleSubmit功能

handleSubmit = () => {
      var newObj = {
      'id' : this.state.id,
      'name' : this.state.name,
      };

或在构造函数中

constructor(props) {
  ...
  this.handleSubmit.bind(this)
}

Answer 2

您必须更改

        var texte = "AreEqual  ( \"test\" ,  Obj.Prop ) && AreEqual ( 1 , 2 ) && AREeQuAl( Obj.Prop , 1 )&& AreEqual (\",\" , 2 ) AND AreEqual (',' , ',' ) AreEqual(\"A,B\", Obj.Prop)";

        //Extract function
        MatchCollection matches = Regex.Matches(texte, @".+?(?=\()");
        var function = Regex.Matches(texte, @".+?(?=\()")[0].ToString().Trim();


        var patternARGS = @"(?<=\().+? (?=\))";
        var patternExtractARGS = @"""[^, ]* , [^, ]*""( , )""[^, ]* , [^,]*""|[^, ]* , [^, ]*""( , )[^""]+""|[^""]+( , )""[^,]* , [^,]*""|( , )";

        // extract all arg between parenthesis
        matches = Regex.Matches(texte, patternARGS);

        //extract all args from previous result, with the difficulty to identify the right ','
        List<String> args = new List<String>();
        foreach (Match m in matches)
        {
            System.Diagnostics.Debug.WriteLine($"{m}");
            MatchCollection x = Regex.Matches(m.ToString(),patternExtractARGS);
            GroupCollection commas = x[0].Groups;

            var index = (commas.SyncRoot as Match).Index;
            var len = (commas.SyncRoot as Match).Length;
            var a1 = m.ToString().Substring(0, index);
            var a2 = m.ToString().Substring(index + len - 1);
            args.Add($"MyClass.{ function}( new ({a1}), new ({a2}))");
        }


        //extract conditions && AND...)
        var patternCONDITION = @"(?<=\)).+?(?=(?i: " + function + "))";
        matches = Regex.Matches(texte, patternCONDITION);



        var output = args[0];
        for(int i = 1;i<args.Count;i++)
        {
            output = output + $" {matches[i - 1].ToString().Trim()} {args[i]}";
        }

和

<label>
  Name:
    <input type="text" name="name" value = {this.props.name} 
    onChange={(e)=>this.props.onChangeValue(e)}></input>
 </label>

如何将表单数据从子组件传递到父组件

2 个答案: