Отображение тега select при нажатии - REACT JS
Я пытаюсь отображать тег выбора всякий раз, когда нажимается div / text.
Я не уверен, где и как именно это отрендерить.
Итак, я создал функцию дескриптора, которая установит для переменной isItClick значение true, чтобы отобразить оператор выбора:
_handleClickSelect(){
isItClick = true;
console.info('here is the select tag')
}
А затем передал его вместе с моим компонентом:
<ItemList _handleClick = {this.props._handleClick} />
затем на моем div я попытался выполнить его, но это, конечно, не сработало:
render() {
const selectList(){
var isItClick = false;
if (isItClick === true){
<div className = "sss-data" onClick = {this.props._handleClickSelect}>
<select>
<option value = "1">Item 1</option>
<option value = "2">Item 2</option>
<option value = "3">Item 3</option>
</select>
</div>
} else {
<div className = "ss" onClick = {this.props._handleClickSelect}>TEXT</div>
}
}
return (
<div className = "ss-row"
{selectList}
</div>
);
}
Любая идея, как я могу визуализировать / изменить текст на тег выбора после нажатия ТЕКСТА, а затем вернуть его после выбора элемента? Извини, новичок. Спасибо!
Вы можете показать мне демонстрацию того, как это сделать? Извините, я просто тестирую и ищу способы правильно его отрендерить.
мне нужно создать государство?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Почему бы вам не использовать состояния конструктора вместо создания переменной?
Документ из ReactJS
Вот пример
class App extends React.Component {
constructor(props) {
super(props);
this.state = {show: false};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
{this.state.show ?
<div className = "sss-data" onClick = {this.props._handleClickSelect}>
<select>
<option value = "1">Item 1</option>
<option value = "2">Item 2</option>
<option value = "3">Item 3</option>
</select>
</div>
: <button onClick = {()=> this.setState({ show: true })}>Show</button>}
</div>
);
}
}
Я думаю, вы неправильно поняли, что я хочу, проверьте еще раз мои коды вверху. И посмотрите, что я имею в виду. По умолчанию в div уже есть текст. Итак, если я нажму на этот текст, он преобразует текст в тег выбора.
Добавьте состояние к компоненту и выполните условную визуализацию. При этом будет использоваться renderText, если showSelected не установлен, и renderSelected, если он установлен.
Синтаксис условного рендеринга следующий: {this.state.showSelected ? this.renderSelected() : this.renderText()}, который можно записать как:
if (this.state.showSelect) {
return this.renderSelected();
} else {
return this.renderText();
}Или даже более компактный со всем включенным кодом:
constructor() {
this.state = { showSelected: false }
}
render() {
return {this.state.showSelected ? this.renderSelected() : this.renderText()}
}
renderText = () => {
return <div className = "ss" onClick = {this.handleTextClick}>TEXT</div>;
}
renderSelected = () => {
return <div className = "sss-data">
<select>
<option value = "1">Item 1</option>
<option value = "2">Item 2</option>
<option value = "3">Item 3</option>
</selected>
</div>;
}
handleTextClick = () => {
this.setState({showSelected: true});
}В этом случае вы можете использовать один компонент с сохранением состояния и один компонент без состояния или один компонент с сохранением состояния. При изменении состояния не setState напрямую true, это противоположно текущему состоянию isItClick : !this.state.isItClick, вы можете попробовать это ...
сохранныйSelectComponent
import React, {Component} from 'react';
import ItemList from './ItemList';
class SelectComponent extends Component {
constructor(props) {
super(props);
this.state = {
isItClick: false
}
this._handleClickSelect = this._handleClickSelect.bind(this);
}
_handleClickSelect = (value) => {
this.setState(() => ({
isItClick : !this.state.isItClick
}));
if (typeof value !== 'object'){
console.info(value);
}
}
render() {
return (
<div>
{this.state.isItClick
? <ItemList _handleClick = {this._handleClickSelect}/>
: <div className = "ss" onClick = {this._handleClickSelect}>TEXT</div>
}
</div>
)
}
}
export default SelectComponent;
И Компонент ItemList без сохранения состояния
import React, {Component} from 'react';
const ItemList = (props) => {
return (
<div className = "sss-data">
<select onChange = {(e) => props._handleClick(e.target.value)}>
<option value = "1">Item 1</option>
<option value = "2">Item 2</option>
<option value = "3">Item 3</option>
</select>
</div>
);
}
export default ItemList;
Почему вы не используете конструктор состояний?