FormComponent

Question

您好我是ReactJs的新手。我想建立一个简单的形式。

我们提交表单后需要更新内容。

请在下面找到代码

MainCOmponent

===============

var React = require('react');
var FormComp = require('FormComp');

var MainComponent = React.createClass({
  getInitialState:function(){
    return(
    this.state = {
      name:'Nageshwari'
    }
  )
},

render:function(){
return(
  <div>
      <h2>Hello {this.state.name} !!!</h2>
      <FormComp/>

  </div>
)
}
});


module.exports = MainComponent;

FormComponent

var React = require('react');

var FormComp = React.createClass({
   onButtonSubmit:function(e){
      e.preventDefault();
      var name = this.refs.name.value;
      if(name.length > 0){
         this.refs.name.value = '';
         return;
      }

   },
  render:function(){
    return(
       <form onSubmit={this.onButtonSubmit}>
         <input type="text" ref="name"/>
         <button>Set Name</button>
       </form>
     );
  }
})

module.exports = FormComp;

我总是只获得初始状态。提交表格后没有更新名称。

感谢。

Answer 1

您需要向public class MainViewModel : INotifyPropertyChanged { public MainViewModel() { FEmployees = new ObservableCollection<Employee>(); FEmployees.Add(new Employee {ID = 1,Name="Jordy van Eijk"}); FEmployees.Add(new Employee {ID = 2,Name="John Doe"}); FEmployees.Add(new Employee {ID = 3,Name="Jane Doe"}); } private ObservableCollection<Employee> FEmployees; public ObservableCollection<Employee> Employees { get { return FEmployees; } set { FEmployees = value; OnPropertyChanged(nameof(Employees)); } } public event PropertyChangedEventHandler PropertyChanged; [NotifyPropertyChangedInvocator] protected virtual void OnPropertyChanged([CallerMemberName] string APropertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(APropertyName)); } } public class Employee { public int ID { get; set; } public string Name { get; set; } }组件添加回调函数。

然后你可以在FormComp中执行该回调函数并更新父组件的状态。

在您的父组件中，您将拥有如下方法：

onButtonSubmit

我希望这有帮助，如果没有，请给我一个问题！

编辑：解释是，子组件不会神奇地更新父组件的状态，这就是您需要回调的原因，以便父组件知道更改！

Answer 2

也许你可以在主要组件中添加功能，它看起来像这样的功能：

<FormComp changeName={this.changeName} />

并像这样传入FormComp组件：

if(name.length > 0){
  this.refs.name.value = '';
  this.props.changeName(name); //this one
  return;
}

并在组件中触发FormComp：

var React = require('react');
var FormComp = require('FormComp');

var MainComponent = React.createClass({
  getInitialState:function(){
    return(
    this.state = {
      name:'Nageshwari'
    }
  )
},

changeName:function(value){
   return(
        this.setState({
                name: value
        }))
},

render:function(){
return(
  <div>
      <h2>Hello {this.state.name} !!!</h2>
      <FormComp changeName={this.changeName} />

  </div>
)
}
});


module.exports = MainComponent;

这是完整的代码：

MainComponent：

var React = require('react');

var FormComp = React.createClass({
   onButtonSubmit:function(e){
      e.preventDefault();
      var name = this.refs.name.value;
      if(name.length > 0){
         this.refs.name.value = '';
         this.props.changeName(name);
         return;
      }

   },
  render:function(){
    return(
       <form onSubmit={this.onButtonSubmit}>
         <input type="text" ref="name"/>
         <button>Set Name</button>
       </form>
     );
  }
})

module.exports = FormComp;

FormComp：

{{1}}

希望它可以帮助你，如果你有错误请注意我，谢谢：）

如何将状态传递到不同文件中的一个组件到另一个组件

FormComponent

2 个答案: