Question

我有一个对象StudentItem，该对象在我的主要App.js组件中呈现。因此，我有另一个组件EditStudentDetails，该组件已隐藏，应在单击该对象后显示。单击后，我设法使EditStudentDetails可见，但无法用对象的信息填充文本区域。因此，我的目标是在拍摄onClick事件之后使用对象的信息设置这些文本区域的值。

class App extends Component {

    constructor(props){
        super(props);
            this.state = {
        student: [
                {
                    Ime: "Martin",
                    Prezime: "Kostadinov",
                    Nasoka: "KNI",
                    Id: "161159"
                },

                {
                    Ime: "Darko",
                    Prezime: "Darkovski",
                    Nasoka: "KNI",
                    Id: "151234"
                }
        ],
            status: false
        }
        this.changeBoolean = this.changeBoolean.bind(this);
    }

    changeBoolean(){
        this.setState({status: true})
    }

  render() {

        let tmp;
        if(this.state.status){
            tmp = (<div>
                <EditStudentDetails/>
            </div>);
        }

    return (
       <div className="App">
            <div>
                <StudentItem student={this.state.student[0]} changeBoolean={this.changeBoolean}/>
            </div>
           <div>
               <StudentItem student={this.state.student[1]} changeBoolean={this.changeBoolean}/>
           </div>
           {tmp}
       </div>
    )
  }
}

export default class StudentItem extends React.Component{

    render() {

        return (
            <div>
                <li onClick={this.props.changeBoolean}>
                <div>
                    <ul>
                    {this.props.student.Ime}
                    </ul>
                </div>
                <div>
                    <ul>
                    {this.props.student.Prezime}
                    </ul>
                    </div>
                </li>
            </div>
        );
    }
}

export default class EditStudentDetails extends React.Component{

    render() {
        return (
            <form>
            <div>
                <div>
                    <input type={"text"} id={"txt1"}/>
                </div>
                <div>
                    <input type={"text"} id={"txt2"}/>
                </div>
                <div>
                    <input type={"text"} id={"txt3"}/>
                </div>
                <div>
                    <input type={"text"} id={"txt4"}/>
                </div>
                <div>
                    <button type={"submit"}>Click</button>
                </div>
            </div>
            </form>
        );
    }
}

Answer 1

您需要将选中的学生作为道具传递给EditStudentDetails，就像您将学生对象传递给StudentItem一样。这意味着您需要一种跟踪选定学生的方法，而不仅仅是布尔status。

您还可以考虑将StudentItem列表作为一个组成部分，也许称为StudentList。然后App应该根据其状态决定是渲染EditStudentDetails还是StudentList。

您还需要一种方法来显示未知长度的StudentItem的整个列表，而不是两个。您可以使用map()函数。

ReactJS-单击对象后，用对象信息填充文本输入

1 个答案: