Реагировать - Рендеринг объектов с изменением реквизита - PullRequest
Новая
       70

Реагировать - Рендеринг объектов с изменением реквизита

0 голосов
/ 04 марта 2020

Проще говоря, я хотел бы создать интерфейс, с помощью которого пользователь может вставлять объекты в div.

Пользователь должен иметь возможность выбирать размещенные объекты и изменять их настройки (цвет, размер, вращение. .).

Я новичок, чтобы отреагировать и воплотить свои идеи в жизнь. 

class Elements extends React.Component {
constructor(props) {
    super(props);
    this.displayData = [];

    this.state = {
        showdata: this.displayData,
        elementData: {
            color: "red",
        }
    };
    this.addDiv = this.addDiv.bind(this);
    this.switchColor = this.switchColor.bind(this);
    this.giveConsoleData = this.giveConsoleData.bind(this);
};

giveConsoleData(){
    console.log(this.state);
}
switchColor() {
    if(this.state.elementData.color == "red"){
        this.setState({
            showdata: this.displayData,
            elementData: {
                color: "blue",

            }
        });
    }else if(this.state.elementData.color == "blue"){
        this.setState({
            showdata: this.displayData,
            elementData: {
                color: "red",

            }
        });
    }
}
addDiv() {
    this.displayData.push(<div style={this.state.elementData} ><FaArrowUp size={32} /></div>);
    this.setState({
        showdata : this.displayData
    });
}
render() {
    const items = this.state.showdata.map(i => <li>{i}</li>);
    return (
        <div>
            <Button type="submit" block variant="primary" onClick={this.addDiv}>Primary</Button>< br/>
            <Button type="submit" block variant="primary" onClick={this.switchColor}>ChangeColor</Button>< br/>
            <Button type="submit" block variant="primary" onClick={this.giveConsoleData}>Consolenlog</Button>< br/>


            {items}

            <div style={this.state.elementData}><h1>I Can Change</h1></div>

        </div>
    );
}
}

export default Elements;

Теперь моя проблема в том, что заголовок h1 может менять цвет, но объекты, которые имеют уже размещены не могут.

Есть ли у меня совершенно неправильный подход?

Может быть, когда вы набираете sh элемент div, текущее значение цвета сохраняется, а не элемент цвета из состояния?

1 Ответ

1 голос
/ 04 марта 2020

Компиляция моих комментариев в ответ с некоторым кодом:

Кажется, вы правы в своем подозрении. Я бы передал this.state.elementData вашему компоненту в render(), а не в addDiv().

Я бы также не рекомендовал хранить компоненты React в массиве. Я бы сохранил данные в массиве, а затем в вашей функции рендеринга решил, что рендерить на основе данных. В вашем текущем примере единственное, что нужно displayData отслеживать, - это сколько элементов визуализировать. Затем при рендеринге вы можете просто рендерить столько <div style={this.state.elementData} ><FaArrowUp size={32} /></div> s.

Вот как я могу изменить ваш код (хотя и немного поспешно), чтобы попытаться выполнить то, что вы описываете:

Обновлен CodePen: https://codepen.io/zekehernandez/pen/RwPLavZ

class Elements extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        showdata: [],
        elementData: {
            color: "red",
        }
    };
    this.addDiv = this.addDiv.bind(this);
    this.switchColor = this.switchColor.bind(this);
    this.giveConsoleData = this.giveConsoleData.bind(this);
};

giveConsoleData(){
    console.log(this.state);
}
switchColor() {
    if(this.state.elementData.color == "red"){
        this.setState({
            elementData: {
                color: "blue",

            }
        });
    }else if(this.state.elementData.color == "blue"){
        this.setState({
            elementData: {
                color: "red",

            }
        });
    }
}
addDiv() {
  this.setState((state, props) => {
    showdata : state.showdata.push(state.showdata.length)
  });
}
render() {

    return (
        <div>
            <button type="submit" block variant="primary" onClick={this.addDiv}>Add Object</button>< br/>
            <button type="submit" block variant="primary" onClick={this.switchColor}>ChangeColor</button>< br/>
            <button type="submit" block variant="primary" onClick={this.giveConsoleData}>Consolenlog</button>< br/>


            {this.state.showdata.map(itemIndex => (
              <div style={this.state.elementData} >item: {itemIndex}</div>
            ))} 

            <div><h1 style={this.state.elementData}>I Can Change</h1></div>

        </div>
    );
  }
}

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