Question

我正在练习使用react构建一个简单的表。这里我的桌子有三列。（名称，职务，删除）。表中已经有一些数据。在第三列中，我要构建一个按钮，以便用户可以单击并取消整行

我已经修复了几个错误，但是表格仍然没有显示

const TableBody = props => { 
    const rows = props.fillTheData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.name}</td>
                <td>{row.job}</td>
                <td><button onClick={() => props.removeCharacter(index)}>Delete</button></td>
            </tr>
        );
    });

    return <tbody>{rows}</tbody>;
}

class App extends React.Component {
  state = {
        character : [ ] 
    };

    removeCharacter = index => {
        const {character} = this.state;

        this.setState({
            character: character.filter((element, i) => { 
                return i !== index;
            })
        });
    }

    handleSubmit = character => {
      this.setState({character:[...this.state.character,character]})
    }

  render() {

    return(
        <div class= "container">
          <Table characters = {this.state.character} removeCharacter = {this.removeCharacter} />
          <Form handleSubmit = {this.handleSubmit}/>
        </div>
    )
  }
}

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

    this.initialState = {
      name: '',
      job: ''
    };

    this.state = this.initialState;
  }

  handleChange = event => {
    const{name,job} = event.target;

    this.setState(
    {
      [name]: value
    }
    );
  }

  submitForm = () => {
    this.props.handleSubmit(this.state);
    this.setState(this.initialState);
 }

  render() {
    const { name, job } = this.state; 

    return (
      <div class="container2">
        <form>
            <label>Name</label>
            <input 
                type="text" 
                name="name" 
                value={name} 
                onChange={this.handleChange} />
            <label>Job</label>
            <input 
                type="text" 
                name="job" 
                value={job} 
                onChange={this.handleChange}/>
        </form>
        <input 
    type="button" 
    value="Submit" 
    onClick={this.submitForm} />
      </div>
    );
 }
}

export default Form;

class Table extends React.Component {
  render(){
    const {characters, removeCharacter} = this.props;
    return(
      <table>
        <TableHeader />
        <TableBody fillTheData = {characters} removeCharacter= {removeCharacter} />
      </table>
    )
  }
}

const TableHeader = () => { 
    return (
        <thead>
            <tr>
                <th>Name</th>
                <th>Job</th>
                <th>Delete</th>
            </tr>
        </thead>
    );
}

现在，我们有一个很棒的Table组件，但是数据正在被硬编码。关于React的重要问题之一是它如何处理数据，它使用属性（称为props）和状态来处理数据。首先，我们将专注于使用道具处理数据。

然后将所有数据移动到对象数组中，就像我们引入基于JSON的API一样。我们必须在render（）中创建此数组。

Answer 1

handleChange组件的Form方法声明了一个名为job的常量，该常量在event.target对象中不存在，它使用{{1}设置状态}该范围中不存在的变量。

所以改变

value

到

const{name,job} = event.target;

您的代码可以正常工作。

我的家长班有什么问题吗？

1 个答案: