Biểu mẫu phản hồi onChange-> setState một bước sau

Question

Tôi gặp sự cố này khi xây dựng một ứng dụng web và tôi đã sao chép nó trong số jsfiddle này. Về cơ bản, tôi muốn một đầu vào để gọi this.setState({message: input_val}) mỗi khi tôi nhập một cái gì đó vào nó, sau đó vượt qua nó vào lớp App cha sau đó lại ám thông điệp vào lớp Message. Tuy nhiên đầu ra dường như luôn luôn là một bước phía sau những gì tôi thực sự gõ. Bản demo jsfiddle nên tự giải thích. Tôi tự hỏi nếu tôi đã làm bất cứ điều gì sai để nhắc điều này.

html

<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script> 
<div id='app'></div> 

js

var App = React.createClass({ 
    getInitialState: function() { 
     return {message: ''} 
    }, 
    appHandleSubmit: function(state) { 
     this.setState({message: state.message}); 
     console.log(this.state.message); 
    }, 
    render: function() { 
     return (
      <div className='myApp'> 
      <MyForm onChange={this.appHandleSubmit}/> 
      <Message message={this.state.message}/> 
      </div> 
     ); 
    } 
}); 

var MyForm = React.createClass({ 
    handleSubmit: function() { 
     this.props.onChange(this.state); 
    }, 
    handleChange: function(e) { 
     console.log(e.target.value); 
     this.setState({message: e.target.value}); 
     this.handleSubmit(); 
    }, 
    render: function() { 
     return (
      <form className="reactForm" onChange={this.handleChange}> 
      <input type='text' /> 
      </form> 
     ); 
    } 
}); 

var Message = React.createClass({ 
    render: function() { 
     return (
      <div className="message"> 
       <p>{this.props.message}</p> 
      </div> 
     ) 
    } 
}); 

React.render(
    <App />, 
    document.getElementById('app') 
); 

Answer 1

Một cuộc gọi đến setState là không đồng bộ. Nó tạo ra "trạng thái chuyển tiếp đang chờ xử lý". (Xem here để biết thêm chi tiết). Bạn nên chuyển giá trị input mới một cách rõ ràng như một phần của sự kiện đang được nêu lên (ví dụ như handleSubmit trong ví dụ của bạn).

Xem ví dụ this.

handleSubmit: function(txt) { 
    this.props.onChange(txt); 
}, 
handleChange: function(e) { 
    var value = e.target.value; 
    this.setState({message: value}); 
    this.handleSubmit(value); 
}, 

Answer 2

Không có lý do gì để MyForm sử dụng trạng thái tại đây. Cũng đặt onChange trên form thay vì input mà bạn quan tâm là odd. Các thành phần được kiểm soát nên được ưu tiên hơn vì hành vi của chúng rõ ràng hơn và bất kỳ lúc nào trạng thái thông báo của ứng dụng (ngay cả khi bạn cho phép Tin nhắn thay đổi sau), nó sẽ chính xác ở mọi nơi.

Điều này cũng làm cho mã của bạn ngắn hơn một chút và đơn giản hơn đáng kể.

var App = React.createClass({ 
    getInitialState: function() { 
     return {message: ''} 
    }, 
    appHandleSubmit: function(message) { 
     this.setState({message: message}); 
    }, 
    render: function() { 
     return (
      <div className='myApp'> 
       <MyForm onChange={this.appHandleSubmit} 
         message={this.state.message} /> 
       <Message message={this.state.message}/> 
      </div> 
     ); 
    } 
}); 

var MyForm = React.createClass({ 
    handleInputChange: function(e){ 
     this.props.onChange(e.target.value); 
    }, 
    // now always in sync with the parent's state 
    render: function() { 
     return (
      <form className="reactForm"> 
       <input type='text' onChange={this.handleInputChange} 
         value={this.props.message} /> 
      </form> 
     ); 
    } 
}); 

jsbin

Answer 3

tôi thấy nó rất cồng kềnh đối với tôi để xác định 3 chức năng xử lý chỉ để có được một số giá trị cho tình trạng của một thành phần, vì vậy tôi đã quyết định không sử dụng nhà nước ở tất cả. Tôi chỉ định nghĩa một thuộc tính bổ sung cho thành phần lưu trữ giá trị mong muốn.

Vì vậy, tôi đã kết thúc với một mã mà nhìn một cái gì đó như thế này:

//... 
}, 
text: '', 
handleChange: function(event) { 
    this.text = event.target.value; 
    this.forceUpdate(); 
}, 
render: function() { 
    return <div> 
     <InputComponent onChange={this.handleChange}/> 
     <DisplayComponent textToDisplay={this.text}/> 
     </div> 
} 
//... 

Answer 4

Có một cách đơn giản hơn nhiều để làm điều này,

Đơn giản chỉ cần vượt qua handleSubmit như một callback để setstate phương pháp, theo cách này sau khi setState hoàn thành chỉ handleSubmit sẽ được thực hiện.

Ví dụ:

handleChange: function(e) { 
    console.log(e.target.value); 
    this.setState({message: e.target.value}, this.handleSubmit); 
} 

Cố gắng thay đổi phương thức handleChange() như ở trên và nó sẽ hoạt động.

cho cú pháp của việc sử dụng setstate việc kiểm tra này link