Question

下面是我的代码

jobClickedHandler = (event, index) => {
              return (
                    <EditJobScheduler
                          open={this.state.editModalActive}
                          onClose={this.closeEditModal}
                          scheduleJobHandler={this.scheduleJobHandler}
                          inputHandler={this.inputHandler}
                          jobInfo={this.state.jobData[index]}
                    />
              )
        this.setState( { editModalActive: true });
  }

上面的组件从click事件中接收其参数。

我这样在我的render方法中调用它。

{this.state.editModalActive && this.jobClickedHandler() }

当我将this.jobClickedHandler方法作为函数调用时，我的组件出错了，因为它期望该数据（我无法访问属性，因为它接收到未定义的数据）

下面是需要道具的组件

class EditJobScheduler extends Component {
  constructor(props) {
        super(props);
        this.state = { modalActive: false, todayDate: moment() }
  }

  handleChange = (date) => {
    this.setState({
        todayDate: date
    });
  }

  render() {
        console.log(this.props.jobInfo)
        return (
              <Modal
                    open={this.props.open}
                    onClose={this.props.onClose}
              >
                    <form className ="modalForm"onSubmit = {this.props.scheduleJobHandler}>
                          <h2 id = "header">Schedule a new job</h2>
                          {/*<span id= "exit" onClick={this.closeModal}>&#8855;</span>*/}
                          <br />
                           <label>Full Name of Customer</label><br />
                          <input name = "customerName" type = "text" value={this.props.jobInfo.jobName} onChange = {this.props.inputHandler}></input>
                          <br />
                          <br />

                          <label>Job Type</label>
                          <br />
                          <select name = "jobType" onChange = {this.props.inputHandler}>
                                <option selected value = {this.state.jobInfo}></option>
                                <option value = "Plumbing">Plumbing</option>
                                <option value = "Septic">Septic</option>
                                <option value = "Drain">Drain</option>
                          </select>
                          <br />
                          <br />

                          <label>Phone Number</label><br />
                          <input name = "phone" type = "tel" value={this.state.jobInfo.jobPhoneNumber} onChange = {this.props.inputHandler}></input>
                          <br />
                          <br />

                          <label>Job Address</label><br />
                          <input ref = "jobAddress" name="address"type = "text" value={this.props.jobInfo.jobAddress} onChange = {this.props.inputHandler}></input>
                          <br />
                          <br />

                          <label>Assigned Tech</label><br />
                          <select name = "assignedTech" onChange = {this.props.inputHandler}>
                                <option value = {'Select a Tech'}></option>
                                <option value = "Kaleb">Kaleb</option>
                                <option value = "Andrew">Andrew</option>
                                <option value = "John">John</option>
                          </select><br />
                          <br />

                          <label>Date of service</label><br />
                          <DatePicker
                                  selected={this.props.jobInfo.jobDate}
                                  onChange={this.handleChange}
                           />

                          <div className = "submit">
                          <button type = "submit" onClick = {this.props.scheduleJobHandler} className = "btn btn-success">Schedule</button>
                          </div>
                    </form>
              </Modal>
        )
  }
}

我只是想用状态数据填充输入。关于为什么为什么要通过我的道具而不是数据传递未定义的任何想法？

Answer 1

通常，当这样的结果以未定义结尾时，问题是“ this”未绑定到特定对象。对于具有使用“ this”的方法的类，尤其是使用react的类，我建议将它们绑定在构造函数中。例如：

class EditJobScheduler extends Component {
  constructor(props) {
        super(props);
        this.state = { modalActive: false, todayDate: moment() };
        this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (date) => {
    this.setState({
        todayDate: date
    });
  }

类似这样的方法将方法绑定到每个实例，而不是绑定到类本身。我希望这会有所帮助。

Answer 2

我认为您正在尝试将处理程序和渲染器合并为一种方法。

这没有任何意义-处理程序更改状态会强制执行新的渲染-如果该事件可以在第一遍中工作-下一步将覆盖它，但还会调用setState等等...

只需单独使用

：

jobClickedHandler = (event, index) => {
    this.setState( { editModalActive: true });
}

renderEditModal = () => {
          return (
                <EditJobScheduler
                      open={this.state.editModalActive}
                      onClose={this.closeEditModal}
                      scheduleJobHandler={this.scheduleJobHandler}
                      inputHandler={this.inputHandler}
                      jobInfo={this.state.jobData[index]}
                />
          )
}


{this.state.editModalActive && this.renderEditModal() }

我还将内容/功能部分分解为单独的组件，以避免在每次状态更改时重新呈现所有元素。

无法将状态数据作为道具传递

2 个答案: