Question

我是React的新手，我正在尝试更新反应。我没有得到确切的逻辑，因此我需要你的帮助点击更新后，我设法获取所选联系人的值，但稍后，我不知道如何将这些值填充到输入文本框中，并在更改值后再次提交，更新所选联系人。我遇到了变化，但我不明白。

我知道的线索：
this.refs.name.value和this.refs.number.value是输入文本框中的值。在更新时，我们需要将这些值设置为相应索引上的状态。

我的代码和截图如下：
Person.js - 数字被视为关键，考虑到个人数字是唯一的

 editcontact(id){
     this.props.onChange(id);
   }
  render() {

          return(

            <div className="panel panel-default">
              <div className="panel-heading">
              <h4>{this.props.detail.name}  </h4>
              <a className="b" href="#" onClick={this.deletecontact.bind(this,this.props.detail.number)}> Delete </a>
              &nbsp;
              <a className="b" href="#" onClick={this.editcontact.bind(this,this.props.detail.number)}> Update </a>
              </div>

               <h6 className="panel-body">{this.props.detail.number}</h6>
            </div>
            </div>
          )
        }

传递给 Contact.js

editcontact(id)
 {
   this.props.onChange(id);
 }
  render() {
     var details;
     if(this.props.data){
        details=this.props.data.map(dts=>{
          return(
            <Person key={dts.number} detail={dts} onChange={this.editcontact.bind(this)} onDelete={this.deletecontact.bind(this)}></Person>
          )
        })

}

然后是 App.js

  handleEdit(id){
      console.log(id);
      let cts=this.state.contacts;
      let index=cts.findIndex( x => x.number === id);
      console.log(cts[index]);
  this.setState({ selectedContact: cts[index]; });

        }

  render() {
    return (
      <div className="App">
        <div className="page-header">

          <h2>Contact list</h2>
        </div>
        <AddContact newOne={this.state.selectedContact} addcontact={this.handleAddition.bind(this)}></AddContact>
         <Contact onChange={this.handleEdit.bind(this)} onDelete={this.handleDelete.bind(this)} data={this.state.contacts}> </Contact>
      </div>

    );

}

AddContact.js

    constructor(){
    super();
    this.state={
      newContact:{
        name:'',
        number:''
      }
    }
  }
    addcontact(e){
    //   console.log(this.refs.name.value);\
    e.preventDefault();
       this.setState({
         newContact:{
           name: this.refs.name.value,
           number:this.refs.number.value
         }
       },function(){
         console.log(this.state.newContact);
         this.props.addcontact(this.state.newContact);
       })
        this.refs.name.value="";
        this.refs.number.value="";
    }



      render() {
             console.log(this.props.newOne);
        return (
          <div className="col-md-6">
          <form  onSubmit={this.addcontact.bind(this)}>
          <div className="form-group">
          <label>Name </label>
          <input className="form-control" type="text" ref="name" />
          </div>
          <div className="form-group">
          <label>Number</label>
          <input className="form-control" type="number" ref="number" />
          </div>
          <input type="submit" value="Submit"/>
          </form>
          </div>
        );
      }
    }

Answer 1

您需要告诉您的组件您有一个新状态，并希望它重新渲染。

 handleEdit(id){
      console.log(id);
      let cts=this.state.contacts;
      let index=cts.findIndex( x => x.number === id);
      this.setState({ selectedContact: cts[index]; });
 }

  render() {
    return (
      <div className="App">
        <div className="page-header">

          <h2>Contact list</h2>
        </div>
        <AddContact addcontact={this.handleAddition.bind(this)}></AddContact>
         <Contact onChange={this.handleEdit.bind(this)} onDelete={this.handleDelete.bind(this)} data={this.state.contacts}> </Contact>
      </div>

    );

使用setState函数更新此组件的状态并使其重新呈现。现在，您可以决定要对此数据执行哪些操作：this.state.selectedContact，例如将其传递给AddContact

Answer 2

不要使用.bind(this...没有理由这样做。使用attribute={() => this.functionName()}

不要使用不同的命名，对属性名称使用一些模式。例如addcontact应为addContact

不要使用这么长的线条。使用Eslint向您展示所有这些提示。

现在很难阅读你的代码，让它更具可读性，你将有更好的时间自己编辑它。

现在要进行更新，我建议使用纯功能组件来显示事物和更高阶的组件来管理数据状态。

(props) => <form> .... <input value={props.email} /> ... </form;

并在父组件中，它负责所有数据管理添加状态。在状态中，您可以使用props保存值并将其传递给子组件。

当你在React中前进时，你将开始使用额外的库来管理应用程序的状态，例如：终极版。它做了类似的事情，但所有应用程序的状态都在一个地方，然后您可以从应用程序的任何部分访问它。例如。你显示这些输入，然后跳转到另一个应用程序状态添加其他东西，然后你可以轻松跳回到这个状态，仍然有部分输入的输入值。

只需保存状态值即可。无论您如何管理应用程序的状态并推送值以使用props显示组件。谷歌，阅读，检查Youtube上的一些视频，你就会得到它。

https://facebook.github.io/react/docs/thinking-in-react.html

更新中的功能

2 个答案: