01/10/2018, 10:31
Lấy dữ liệu state của component từ bên ngoài - React
Mình đang tìm hiểu React, mắc ở chỗ lấy dữ liệu của 1 component từ bên ngoài hoặc component khác.
Ví dụ:
(Copy từ Vim nên nó bị mấy dấu | các bạn đừng để ý nhé)
ComplieButton.jsx
class ComplieButton extends React.Component
{
render()
{
¦ return (
¦ ¦ <button
¦ ¦ ¦ className="myButton"
¦ ¦ >
¦ ¦ ¦ Complie
¦ ¦ </button>
¦ );
}
}
Editor.jsx
class Editor extends React.Component
{
constructor(props)
{
¦ super(props);
¦ this.state = {
¦ ¦ value: props.value,
¦ };
}
render()
{
¦ return (
¦ ¦ <AceEditor
¦ ¦ ¦ onChange={this.onChange.bind(this)}
¦ ¦ ¦ value={this.state.value}
¦ ¦ />
¦ );
}
}
Mình muốn là làm sao để lấy được giá trị của Editor.state.value
từ component ButtonComplie
Bài liên quan
Giả sử CompileButton ở Child Component của Editor.
B1: Tạo 1 method trong Editor, ví dụ
compile()
, chức năng thay đổi state.B2: Truyền method vừa tạo vô CompileButton thông qua props:
<CompileButton onButtonClick={this.compile.bind(this)} />
B3: Trong CompileButton, lúc render thêm props
onClick={() -> this.props.onButtonClick()}
Cảm ơn bạn, mình dùng cách này, lấy được dữ liệu và trao đổi cho các component được rồi, nhưng khi thay đổi state thì lại không thành công, nó vẫn giữ nguyên dữ liệu cũ.
Code dưới đây mình cho 2 Component đó làm Child cho Component App:
(Code hơi dài xíu)
Như code trên thì khi mình nhập dữ liệu vào trong Editor, log ở hàm
onChangeEditor
có cho ra nội dung đã thay đổi (tuy nhiên editor vẫn giữ nguyên nội dung), khi click vàoComplieButton
thì dữ liệu của stateeditorValue
vẫn như ban đầuBạn bị duplicate state, 1 state ở App Component, 1state ở Editor Component. Hàm onChangeEditor() của bạn chỉ update state ở App Component, còn render ra UI lại thuộc state của Editor. Đó là lý do tại sao bạn code có update state nhưng UI hiển thị không thay đổi.
Giờ bạn xoá state ở Editor Component, sử dụng trực tiếp props thay vì state, code bạn ở Editor giống thế này:
<AppEditor ... value={this.props.value} />
Sau đó giống như mình đã viết, tạo
compile()
ở App Component, truyềncompile
xuống CompileButton, trong render() của CompileButton gọi callbackonButtonClick()
trong props.Bạn có thể thay đổi tên cho dễ.
Cảm ơn bạn, giờ mình hiểu chút ít về cấu trúc render của react rồi.
Ở bên ComplieButton mình dùng luôn this.props.editorValue là ok.