Question

我的页面上有学生名单。当我单击某个学生时，将出现一个表格，其中包含所有学生属性的输入元素。提交表格后，学生的属性应更改。问题是当我想将输入元素的初始值设置为当前所选学生的属性时。输入元素的值填充了当前学生的属性，但是当我尝试在该输入中键入内容时，其值不会改变。父组件代码

class App extends Component {
      constructor(props){
        super(props);
        this.state = {
          students :listStudents(),
            visible: false,
            index: 0,
            student: listStudents()[0]
        };
        this.onClick = this.onClick.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.onNewStudentSubmit = this.onNewStudentSubmit.bind(this);
      }

      onClick(index){
        if(this.state.visible){
          this.setState({
              visible: false,
              index: 0
          });
        }
        else {
            let student1 = this.state.students
                .filter(s => s.index === index);
          this.setState({
              visible: true,
              index: index,
              student: student1[0]
          });
        }
      }

      onSubmit(student){
          let list = this.state.students
              .map(s => {
                if(s.index === this.state.index)
                  return student;
                return s;
              });
        this.setState({
           students : list,
           visible: false
        });
      }

      render() {
        return (
          <div className="App">
            <StudentsList students={this.state.students} onClick={this.onClick}/>
            <EditStudentDetails student={this.state.student} visible={this.state.visible} onSubmit={this.onSubmit}/>
              <CreateStudent onSubmit={this.onNewStudentSubmit}/>
          </div>
        );
      }
    }

    export default App;

onClick函数更改选定的学生并将其存储在state.student中。提交学生的编辑表单时，将触发onSubmit函数。 Render返回所有学生的列表以及一个可见的编辑组件。下面是我的编辑组件的代码。

import React from 'react';

class EditStudentDetails extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name: "",
            surname: "",
            index : "",
            class : "",
            visible: ""
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleSurnameChange = this.handleSurnameChange.bind(this);
        this.handleClassChange = this.handleClassChange.bind(this);
        this.handleIndexChange = this.handleIndexChange.bind(this);
    }


    handleSubmit(e){
        const student = {
            name: this.state.name,
            surname: this.state.surname,
            index : this.state.index,
            class : this.state.class
        };
        this.props.onSubmit(student);
        e.preventDefault();
    }

    handleNameChange(e){
        const newName = e.target.value;
        this.setState({
           name: newName
        });
    }

    handleSurnameChange(e){
        const newName = e.target.value;
        this.setState({
            surname: newName
        });
    }

    handleIndexChange(e){
        const newIndex = e.target.value;
        this.setState({
            index: newIndex
        });
    }

    handleClassChange(e){
        const newClass = e.target.value;
        this.setState({
            class: newClass
        });
    }

    render(){
        const type = this.props.visible ? {display: 'block'} : {display: 'none'} ;
        return(
            <div style={type}>
                <form className="form-group" onSubmit={this.handleSubmit}>
                    Име
                    <input className="Name" type="text" onChange={this.handleNameChange} value={this.props.student.name}/>
                    Презиме
                    <input className="Surname" type="text" onChange={this.handleSurnameChange} value={this.props.student.surname}/>
                    Индекс
                    <input className="Index" type="text" onChange={this.handleIndexChange} value={this.props.student.index}/>
                    Насока
                    <input className="Class" type="text" onChange={this.handleClassChange} value={this.props.student.class}/>
                    <input className="submit btn" type="submit" value="Промени"/>
                </form>
            </div>
        );
    }
}

export default EditStudentDetails;

我尝试通过将每个输入的值设置为适当的prop来设置初始值。然后，当输入组件状态发生更改时，应该更新。但是正如我所说，每个输入的值都不会改变。

Answer 1

问题在这里。

<input className="Name" type="text" onChange={this.handleNameChange} value={this.props.student.name}/>

输入的值是this.props.student.name，但是在this.handleNameChange中，您更改了this.state.name，因此当您键入内容时，看不到输入值的更改。我想您需要这样的东西：

this.state = {
   class: props.student.name
}
...
<input className="Name" type="text" onChange={this.handleNameChange} value={this.state.name}/>

Answer 2

您告诉React将传递的prop用作输入值，并且由于prop未被更改，因此该值也不是。将传递的道具设置为组件状态，并在更改输入时更新状态。

如果要剃除某些字节，还可以使用更通用的 onChange 方法，如下例所示，只要您能够设置 name 属性在输入字段上。

class EditStudentDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      surname: "",
      index: "",
      class: "",
      visible: "",
      ...this.props.student
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleSubmit(e) {
    const student = {
      name: this.state.name,
      surname: this.state.surname,
      index: this.state.index,
      class: this.state.class
    };
    this.props.onSubmit(student);
    e.preventDefault();
  }

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

  render() {
    const type = this.props.visible ? { display: 'block' } : { display: 'none' };
    return (
      <div style={type}>
        <form className="form-group" onSubmit={this.handleSubmit}>
          Име
                    <input className="Name" name="name" type="text" onChange={this.handleChange} value={this.state.name} />
          Презиме
                    <input className="Surname" name="surname" type="text" onChange={this.handleChange} value={this.state.surname} />
          Индекс
                    <input className="Index" name="index" type="text" onChange={this.handleChange} value={this.state.index} />
          Насока
                    <input className="Class" name="class" type="text" onChange={this.handleChange} value={this.state.class} />
          <input className="submit btn" type="submit" value="Промени" />
        </form>
      </div>
    );
  }
}

反应，将初始值设置为输入元素

2 个答案: