Question

我试图通过向链传递文本字段的输入来手动验证输入。应该发生一些魔法，以便检查以下条件：

如果输入文本与数组中已存在的文本相匹配 - 错误=“已存在”＆amp;文本未添加到列表中
如果输入文本为空白 - 错误=“无文本输入”＆amp;文本未添加到列表中
如果输入文本不是空白且尚不存在 - 请运行另一种方法将文本添加到列表中

默认情况下，错误设置为null

目前在input.js文件中，{this.props.renderError}行会在发生任何事情之前在控制台中导致“欠定”输出。我理解为什么会这样，但我想知道是否有办法阻止它？

功能方面：我可以输出错误信息，但这似乎是在文本已经放在任务列表中之后运行...

App.js（父母）

const tasks = [
  { name: 'task1', isComplete: false },
  { name: 'task2', isComplete: true },
  { name: 'task3', isComplete: false },
]

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      error: null,
    }
  }

  render() {
    return (
      <div>
        <Input
          createTask={this.createTask.bind(this)}
          renderError={this.renderError.bind(this)}
          taskList={this.state.tasks}
          throwError={this.throwError.bind(this)}
        />
     </div>
    )
  }

  createTask(task, errorMsg) {
    this.throwError(errorMsg);

    if (this.state.error) {
      return;
    } else {
      this.setState((prevState) => {
        prevState.tasks.push({ name: task, isComplete: false });
        return {
          tasks: prevState.tasks
        }
      })
    }
  }

  throwError(errorMsg) {
    if (errorMsg) {
      this.setState((prevState) => {
        prevState.error = errorMsg;
        return { 
          error: prevState.error 
        }
      })
    }
    return;
  }

  renderError() {
    if (this.state.error) {
      return <div style={{ color: 'red' }}>{this.state.error}</div>
    }
  }

Input.js（孩子）

render() {
    return (
      <form ref="inputForm" onSubmit={this.handleCreate.bind(this)}>
        <TextField placeholder="Input.js"/>
        <Button type="submit">Click me</Button>
        {this.props.renderError()}
      </form>
    )
  }

  validateInput(taskName) {
    if (!taskName) {
      return '*No task entered';
    } else if (this.props.taskList.find(todo => todo.name.toLowerCase() === taskName.toLowerCase())) {
      return '*Task already exists'
    } else {
      return null;
    }
  }

  handleCreate(event) {
    event.preventDefault();
    // Determine task entered
    var newTask = this.refs.inputForm[0].value;
    // Constant for error message returned
    const validInput = this.validateInput(newTask);
    // If error message produced - trigger error to be shown & end
    if (newTask) {
      this.props.createTask(newTask, validInput);
      this.refs.inputForm.reset();
    }
  }

更新

我已经发现，如果我将renderError和throwError方法移至input.js并在州财产error之间转移，我可以完成此工作。

无法更新州财产？应对

0 个答案: