Question

对于我的一生，我不知道为什么我的React App无法正常工作。我的输入状态在onSubmit之后呈现。但我的价值并没有在输入栏中消失。而且我的清单上没有任何内容。将组件分解成较小的块后，我才遇到这个问题，当它是1个完整组件时，我没有任何问题。

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      input: '',
      items: []
    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    this.setState({
      input: e.target.value
    })
  }

  handleSubmit(e) {
    e.preventDefault();
    this.setState({
      input: '',
      items: [...this.state.items,this.state.input]
    })
    console.log(this.state.input)
  }

  render() {
    return (
      <div>
        <Form handleChange={this.handleChange} handleSubmit={this.handleSubmit}
        value={this.state.input}/>
        <List items={this.state.items}/>
      </div>
    )
  }
}

class Form extends React.Component {
  constructor(props){
    super(props)

  }

  render() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        <input onChange={this.props.handleChange} value={this.props.input}/>
        <button>Submit</button>
      </form>
    )
  }
}

class List extends React.Component {
  render() {
    return (
      <ul>
        {
          this.props.items.map((item,index) => {
            <li key={index}>{item}</li>
          })
        }
      </ul>
    )
  }
}

Answer 1

“不消失”的问题是由于以下原因：

<input onChange={this.props.handleChange} value={this.props.input}/>

没有任何input道具，它是value。参见：

value={this.state.input}

应该是：

<input onChange={this.props.handleChange} value={this.props.value}/>

上市问题是由于以下原因：

{
    this.props.items.map((item,index) => {
        <li key={index}>{item}</li>
    })
}

在这里，您正在使用箭头功能和主体块。如果使用主体块，则必须使用return语句。

{
  this.props.items.map( ( item, index ) => {
    return ( <li key={index}>{item}</li> );
  } )
}

或者您可以像这样使用它：

{
  this.props.items.map( ( item, index ) =>
    <li key={index}>{item}</li> )
}

反应待办事项列表。在onsumbit

1 个答案: