שאלה לגבי התרגיל: תיבות טקסט מסונכרונת

קורס React
#1

import React from ‘react’;

class SingleInput extends React.Component {

constructor(props) {
super(props);
this.state = {
inputValue: “”
}

    this.changeValue = this.changeValue.bind(this);

}

changeValue = (e) => {
const newText = e.target.value;
this.setState({
inputValue: newText
});

}

render() {
var style = {
width: ‘300px’,
margin: ‘16px’
}
return (




);
};
}
SingleInput.propTypes = {
inputValue: React.PropTypes.string
}

SingleInput.defaultProps = {
inputValue: “Enter youe text here”
}

export default SingleInput;

  • My Problem: Where you want us to save the shared value of all inputs? put it in static variable (bad practice)?. Please give me direction - Now the value is not update all inputs

Thanks

#2

הי אילנית,

קודם כל קטעי קוד עדיף להדביק בבלוק שמתחיל ונגמר בסימן ```. זה נראה ככה:

console.log('this is a code block');
console.log("it's aligned to the left and highlighted");

או אפשרות אפילו יותר טובה זה פשוט להדביק כתובת של דף מקודפן למשל:

ואז אפשר גם להריץ את זה.

עכשיו לשאלה-

יש רק שתי אפשרויות לשיתוף מידע בין פקדים (בכלל בריאקט, כלומר בכל תוכנית שאי פעם תכתבי):

  1. אפשר לשמור את המידע במשתנה גלובלי וכל תיבה תיקח את הערך ממנו. במצב כזה צריך לחשוב על מנגנון להגיד לתיבות האחרות שערך המשתנה השתנה והן צריכות לבצע render שוב.

  2. אפשר לכתוב את כל התיבות בתוך פקד מכיל, ואז לשמור את המידע בפקד שמכיל את התיבות. כל פעם שיש שינוי התיבה מודיעה לפקד שמכיל אותה, ה State שלו מתעדכן ומועבר אוטומטית כ Props לתיבות האחרות.

לדעתי אפשרות (2) יותר קלה בתרגיל הזה, אבל באמת ששתיהן טובות.

#3

במחשבה שניה ואחרי עוד מבט על התרגיל:

הרבה יותר קל יהיה לכתוב פקד React יחיד שמכיל 5 תיבות טקסט. הטקסט שמור כ State של פקד זה.

(וככה לא צריך לסנכרן מידע בין כמה פקדים)

#4

זה ממש עדיף לתרגיל ראשון! אחרת סתם אפשר להסתבך

לייק 1