Question

我正在尝试为动态生成的div渲染组件HomeScreen.js。我能够让这个有点工作，但是我无法将组件从动态生成的div中分离出来，而且我只是尝试仅为单击的div渲染HomeScreen.js，但功能我目前已为所有div打开HomeScreen.js。

（这是一个联系人应用程序，动态生成的div是联系人。我只是想显示每个被点击的联系人的联系信息）

我附上了当前功能和我想要获得的功能的截图

我可以使用一些见解。

import store from '../libs/store.js';
var jsforce = require('jsforce');

class menuScreen extends React.Component {

    constructor(props) {
        super(props)

        const data = store.getState();

        this.state = {

            username: '',
            messages: data.messages,
            records: [],
            showModal: false,
            showChat: false

        }
    }

    handleSearch(e) {
        this.setState({
            username: e.target.value
        })
    }

    handleChange(evt) {
        this.setState({
            username: evt.target.value.substr(0, 100)
        });

    }

    onClick(e) {
        e.preventDefault();
        this.setState({
            showChat: !this.state.showChat
        })
    }

    onLinkClicked() {


        var conn = new jsforce.Connection({
            serverUrl: 'https://cs63.salesforce.com',
            accessToken: sessionStorage.getItem('token')
        })

        var parent = this.state.username
        //console.log(this.state.username)
        conn.sobject("Contact").find({
                LastName: {
                    $like: parent
                }
            }, 'Id, Name, Phone, Account.Name'

        ).sort('-CreatedDate Name').
        limit(5).skip(10).execute(function(err, records) {
            if (err) {
                return console.error(err);
            }
            for (var i = 0; i < records.length; i++) {
                var record = (records[i]);
                console.log("Name: " + record.Name); 
                console.log("Phone: " + record.Phone);
                console.log("Account Name: " + record.Account.Name);

            }
            this.setState({
                records: records
            })

            this.setState({
                showChat: !this.state.showChat
            })

        }.bind(this))

    }

    render() {
        return (
            <div className='menubox' id='menubox'>

                <div className="boxbox">
                    <input className="search" type="text" placeholder="Contact Last Name" onChange={this.handleChange.bind(this)} value={this.state.username} />
                    <input className="submit" type="submit" onClick={this.onLinkClicked.bind(this)} value="GO" /></div>
                <div>
                    <div>
                        {this.state.records.map(record => (
                            <div className="info-block block-info clearfix">
                                <div className="square-box pull-left">
                                    <span className="glyphicon glyphicon-user glyphicon-lg"></span>
                                </div>
                                <h5>{record.Name}</h5>
                                <h4>{record.Phone}</h4>
                                <p>{record.Account.Name}</p>

                                    **//Trying to render home.js when Chat Bubble is clicked.**

                                    <a onClick={this.onClick.bind(this)}>
                                    <img src="./img/speechbubble.png" className="textIcon" />
                                     {this.state.showChat && < HomeScreen / >}
                                </a>
                            </div>
                        ))}
                    </div>

                </div>
            </div>

        )
    }

}

export default menuScreen;

Answer 1

原因是，您使用单个state变量来控制所有dynamic div，您需要使用array，每个元素的每个值，而不是{{1} }，在showChat = false变量中使用showChat = []。要更改state函数中array的值，您需要传递onClick函数中的元素索引，并使用该索引更改特定值。

对于其他更改，请检查代码和注释，它应该可以正常工作。

使用此：

onClick

建议：在构造函数中定义绑定，而不是在render中绑定方法，如下所示：

import store from '../libs/store.js';
var jsforce = require('jsforce');

class menuScreen extends React.Component {

    constructor(props) {
        super(props)

        const data = store.getState();

        this.state = {
            username: '',
            messages: data.messages,
            records: [],
            showModal: false,
            showChat: []  //initially blank array
        }
    }

    handleSearch(e) {
        this.setState({
            username: e.target.value
        })
    }

    handleChange(evt) {
        this.setState({
            username: evt.target.value.substr(0, 100)
        });

    }

    onClick(i, e) { // pass the index on item clicked
        e.preventDefault();

        let showChat = this.state.showChat.slice();
        showChat[i] = !showChat[i];  //use that index to change the specific value
        this.setState({ showChat })
    }

    onLinkClicked() {

        var conn = new jsforce.Connection({
            serverUrl: 'https://cs63.salesforce.com',
            accessToken: sessionStorage.getItem('token')
        })

        var parent = this.state.username
        //console.log(this.state.username)
        conn.sobject("Contact").find({
                LastName: {
                    $like: parent
                }
            }, 'Id, Name, Phone, Account.Name'

        ).sort('-CreatedDate Name').
        limit(5).skip(10).execute((err, records) => { //use arrow function
            if (err) {
                return console.error(err);
            }
            // this loop is not required
            /*
            for (var i = 0; i < records.length; i++) {
                var record = (records[i]);
                console.log("Name: " + record.Name); 
                console.log("Phone: " + record.Phone);
                console.log("Account Name: " + record.Account.Name);

            }
            */
            console.log('recoreds values', records);
            this.setState({
                records: records,
            })
        })

    }

    render() {
        return (
            <div className='menubox' id='menubox'>

                <div className="boxbox">
                    <input className="search" type="text" placeholder="Contact Last Name" onChange={this.handleChange.bind(this)} value={this.state.username} />
                    <input className="submit" type="submit" onClick={this.onLinkClicked.bind(this)} value="GO" /></div>
                <div>
                    <div>
                        /*use the index also in map*/
                        {this.state.records.map((record, i) => (
                            <div className="info-block block-info clearfix">
                                <div className="square-box pull-left">
                                    <span className="glyphicon glyphicon-user glyphicon-lg"></span>
                                </div>
                                <h5>{record.Name}</h5>
                                <h4>{record.Phone}</h4>
                                <p>{record.Account.Name}</p>

                                   <a onClick={this.onClick.bind(this, i)}>
                                    <img src="./img/speechbubble.png" className="textIcon" />
                                     {this.state.showChat[i] && < HomeScreen / >}
                        {/*use this.state.showChat[i] specific value*/}
                                </a>
                            </div>
                        ))}
                    </div>

                </div>
            </div>

        )
    }

}

export default menuScreen;

直接使用：

this.handleChange = this.handleChange.bind(this);

Answer 2

我同意Mayank关于为showChat使用数组的回答，但基于这个想法，是否有任何理由不能将每个联系人作为一个单独的组件？就个人而言，我会渲染一个子组件数组，如Contact组件或其他东西，并从外部menuScreen组件中的状态向每个子组件传递道具。

class Contact extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return (
      <div className="info-block block-info clearfix">
        <div className="square-box pull-left">
          <span className="glyphicon glyphicon-user glyphicon-lg"></span>
        </div>
        <h5>{record.Name}</h5>
        <h4>{record.Phone}</h4>
        <p>{record.Account.Name}</p>

        <a onClick={this.props.onClick}>
          <img src="./img/speechbubble.png" className="textIcon" />
          {this.props.showChat && < HomeScreen / >}
        </a>
      </div>
    )
  }
}

然后您可以在menuScreen组件中使用它，如下所示：

import store from '../libs/store.js';
var jsforce = require('jsforce');


class menuScreen extends React.Component {

    constructor(props) {
        super(props)

        const data = store.getState();

        this.state = {
            username: '',
            messages: data.messages,
            records: [],
            showModal: false,
            showChat: []
        }
    }

    handleSearch(e) {
        this.setState({
            username: e.target.value
        })
    }

    handleChange(evt) {
        this.setState({
            username: evt.target.value.substr(0, 100)
        });

    }

    onClick(i, e) {
        e.preventDefault();

        let showChat = this.state.showChat.slice();
        showChat[i] = !showChat[i];
        this.setState({ showChat })
    }

    onLinkClicked() {

        var conn = new jsforce.Connection({
            serverUrl: 'https://cs63.salesforce.com',
            accessToken: sessionStorage.getItem('token')
        })

        var parent = this.state.username
        //console.log(this.state.username)
        conn.sobject("Contact").find({
                LastName: {
                    $like: parent
                }
            }, 'Id, Name, Phone, Account.Name'

        ).sort('-CreatedDate Name').
        limit(5).skip(10).execute((err, records) => {
            if (err) {
                return console.error(err);
            }
            // this loop is not required
            /*
            for (var i = 0; i < records.length; i++) {
                var record = (records[i]);
                console.log("Name: " + record.Name); 
                console.log("Phone: " + record.Phone);
                console.log("Account Name: " + record.Account.Name);

            }
            */
            console.log('recoreds values', records);
            this.setState({
                records: records,
            })
        })

    }

    render() {
        return (
            <div className='menubox' id='menubox'>

                <div className="boxbox">
                    <input className="search" type="text" placeholder="Contact Last Name" onChange={this.handleChange.bind(this)} value={this.state.username} />
                    <input className="submit" type="submit" onClick={this.onLinkClicked.bind(this)} value="GO" /></div>
                <div>
                    <div>
                        {this.state.records.map((record, i) => (
                          <Contact onClick={onClick.bind(this, i)} showChat={this.state.showChat[i]} />
                        ))}
                    </div>

                </div>
            </div>

        )
    }

}

export default menuScreen;

可能更多的是一种观点，而不仅仅是一个答案，但通常更好的是将组合中的表示与状态分开。这样它也更具可扩展性，因为子Contact组件在运行menuScreen组件的onClick函数之前仍然可以执行其他操作，使其几乎像装饰器一样。

反应中显示每个动态div的组件

2 个答案: