#reactjs #material-ui
#reactjs #материал-пользовательский интерфейс
Вопрос:
Я новичок в react, я пытаюсь получить компонент на основе нажатия кнопки if, и как только компонент возвращается в пользовательский интерфейс, я хочу изменить состояние кнопки обратно на исходное (false), поэтому, если я снова нажму на эту кнопку, я должен снова получить новый компонент ниже предыдущего, и это должно продолжаться .., в приведенном ниже коде я могу получить это только один раз.
const Command = () => {
const [buttonState, setButtonState] = useState(false);
const AndOrHandler = () => {
if (buttonState) {
return (
<div>
<Grid container>
<SomeComponent />
</Grid>
</div>
);
}
return null;
};
return (
<Fragment>
<FormControl>
<SomeComponent />
<AndOrHandler />
<Button onClick={() => setButtonState(true)} variant="contained" color="primary">Add Condition</Button>
</FormControl>
</Fragment>
);
};
export default Command;
Комментарии:
1. Вы просто хотите переключить
buttonState
значение состояния, чтобы переключить рендерингAndOrHandler
? Или вы пытаетесь добавлять новые элементы в пользовательский интерфейс при каждом нажатии кнопки? Описание проблемы в этом отношении немного расплывчатое. Каково ваше ожидаемое поведение и постарайтесь быть как можно более ясным и кратким.2. да, я пытаюсь добавлять новые элементы в пользовательский интерфейс при каждом нажатии кнопки
3. Не могли бы вы обновить свой код с помощью логики цикла? Или это то, что вы хотите, чтобы мы написали для вас? Что вы пробовали?
4. Это та часть, которую я не могу понять, как добавить сюда цикл и отобразить компонент на этом … я пытался с, do while, но не получил удовлетворительных результатов..
5. Да, переключение вашего мышления с императивного на декларативное кодирование является камнем преткновения для многих, включая меня. Пойдите с решением Viet, но я настоятельно рекомендую использовать обновления функционального состояния, когда следующее состояние зависит от текущего состояния. Если вы приобретете эту привычку сейчас, когда вы учитесь, вам будет легче избежать целого класса ошибок в состоянии реакции. Удачи, приятель.
Ответ №1:
Вы хотите продолжить добавление компонента, я предлагаю иметь компоненты состояния:
const Command = () => {
const component = <div>
<Grid container>
<SomeComponent />
</Grid>
</div>;
const [components, setComponents] = useState([]);
return (
<Fragment>
<FormControl>
<SomeComponent />
{components.map(component => component)}
<Button onClick={() => setComponents([...components, component])} variant="contained" color="primary">Add Condition</Button>
</FormControl>
</Fragment>
);
};
export default Command;
Комментарии:
1. не совсем, я хочу функциональность, подобную циклу, при нажатии кнопки я должен получить новый новый компонент ниже предыдущего компонента, ваше предложение просто скроет и покажет мой текущий компонент.
2. Идиоматический способ переключения логического значения состояния реакции — использовать функциональное обновление, т. Е.
setButtonState(state => !state)
, КСТАТИ.3. Опять же, идиоматический способ ставить в очередь обновления состояния, которые зависят от существующего состояния, заключается в использовании обновления функционального состояния,
setComponents(components => [...components, component])
.