الرد النموذج مع الحدث

سيناقش هذا القسم كيفية استخدام النماذج في رد الفعل.

وهو مثال بسيط

في المثال وضعنا قيمة منقيمة مربع إدخال المدخلات = {this.state.data}.عندما تتغير قيمة مربع الإدخال نتمكن من تحديث الدولة. يمكننا استخدام الحدثonChange للاستماع لإجراء تغييرات في المدخلات وتعديل حالة.

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello w3big!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <input type="text" value={value} onChange={this.handleChange} /> 
            <h4>{value}</h4>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

محاولة »

سوف رمز أعلاه يجعل قيمة مرحبا w3big! عنصر المدخلات، والتي تم تحديثها في الاستجابة إلى إدخال المستخدم القيم الحدث عند_التغيير.

مثال 2

في المثال التالي وسوف تظهر لك كيفية استخدامها في النموذج على جمعية ثانوية. طريقةعند_التغيير يطلق تحديثا وتحديث ينتقل قيمة الدولة على مربع الإدخال الفرعية التجميع من قيمةما يصل جعل إعادة الواجهة.

تحتاج ينتقل عنصر الديك إلى التجمع الفرعي عن طريق إنشاء معالج الحدث(handleChange)، وكدعامة(updateStateProp).

var Content = React.createClass({
  render: function() {
    return  <div>
            <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
            <h4>{this.props.myDataProp}</h4>
            </div>;
  }
});
var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello w3big!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <Content myDataProp = {value} 
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

محاولة »

تتفاعل الأحداث

توضح الأمثلة التالية لتعديل البيانات من خلال الحدث onClick:

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello w3big!'};
  },
  handleChange: function(event) {
    this.setState({value: '本教程'})
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <button onClick={this.handleChange}>点我</button>
            <h4>{value}</h4>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

محاولة »

عندما تحتاج إلى تحديثالدولة من المكون الأم شبه التجمع، تحتاج إلى عنصر الأم عن طريق إنشاء معالج الحدث (handleChange)،وتسليمها لجمعية ثانوية كما هودعامة(updateStateProp). ومن الأمثلة على ذلك ما يلي:

var Content = React.createClass({
  render: function() {
    return  <div>
              <button onClick = {this.props.updateStateProp}>点我</button>
              <h4>{this.props.myDataProp}</h4>
           </div>
  }
});
var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello w3big!'};
  },
  handleChange: function(event) {
    this.setState({value: '本教程'})
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <Content myDataProp = {value} 
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

محاولة »