Question

class Filter extends React.Component {
     constructor(props) {
        super(props);
        this.state = {
           follow: "Follow",
           userList: {
               user1: "A", 
               user2: "B",
               user3: "C", 
               user4: "D",
               user5: "E", 
               user6: "F",
           },
        }
     }

     folowButtonClick = (e) => {
       const taget = document.getElementById(e.target.id);
       target.innerHTML = "Following";
     } 

     render() {
        return this.state.userList.map((user, index, users) (
            <div className="user-container"  key={user.index}>
               <button onClick= 
                   {(e)=>this.folowButtonClick(e)} id={user.index}>Follow
               </button>
            </div>
        )
}}

我在这里做的是呈现列表项，然后单击一个DOM项并使用getElementById更改其内容。

我认为这不是在React中以这种方式更改任何内容的好方法。

我在Google上搜索了很多次，但找不到任何方法。我知道这很简单，但是我被困在这里。

Answer 1

您想做的事情扼杀了整个反应的目的，改用这种方法。

但是我不明白你的追求，但是基本上这就是你告诉我的。

class Filter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text:'Follow',
            userList: [{
                id: 0
            }, {
                id: 1
            }, {
                id: 2
            }]
        }
        this.folowButtonClick = this.folowButtonClick.bind(this);
    }

    folowButtonClick = (e) => {
        e.preventDefault();
        let state = this.state;
        state.text='Following';
        this.setState({ state });
    }

    render() {
        return this.state.userList.map((user, index)(
            <div className="user-container" key={index}>
                <button onClick=
                    {(e) => this.folowButtonClick(e)}>{this.state.text}
                </button>
            </div>
        )
}
}

这是在React项目列表中使用getElementById更改点击项值的好方法

1 个答案: