Question

我正在尝试构建选项框，该选项框在呈现时将预先填充有分配的用户名和姓氏。当前，每次呈现页面时，选项框都会使用列表中的第一个选项进行填充，因此看起来好像数据尚未保存，但实际上已经保存了。请考虑将用户名和姓氏存储在与userId关联的数据库的另一个表中。

谢谢。

render() {
return (
    <div key={this.props.task.id} className="taskCard">
        <div className="taskCardBody">
            <h3 className="taskCardTitle">
                <p>{this.props.task.taskDesc}</p>
                <p>{this.props.task.dueDate}</p>
                <p>{this.props.task.note}</p>

                <label htmlFor="assignTo" placeholder="Assign To">Assign To</label>
                <select className="form-control"
                    onInput={this.assignTo}
                    id="assignTo" placeholder="Assign To">
                    <option value="" defaultValue="" ></option>
                    {this.props.employees.map(employee => (
                        <option key={employee.id} id={employee.id} value={employee.id}>
                            {employee.name} {employee.surname}
                        </option>
                    ))}
                </select>

                <br></br>

                <button className="btn btn-primary" onClick={() => this.props.history.push(`/tasks/${this.props.task.id}/edit`)}>Edit Task</button>
                <br></br>
                <button onClick={() => this.props.deleteTask(this.props.task.id)}
                    className="btn btn-danger">Delete Task
                    </button>
            </h3>
        </div>
    </div>
)

}

如果已为Joe Smith分配了特定任务，我希望在渲染器上显示的选项为“ Joe Smith”。否则，如果未分配任何人，则呈现“一些默认字符串”。

Answer 1

只要您的assignTo函数将员工ID传递给州，您就可以用它来预填充州，然后将<select>的值设置为this.state.selectedEmployee（或其他任何值）命名）。

您能帮我用来自对象的数据预填充选项框吗？

1 个答案: