Javascript 如何制作<；输入>；价值柔性

我有两个ReactJS组件，第一个将显示网格。单击一行时，它将使用名称填充2组件

但当我试图编辑输入框时，它无法更改。ReactJS中处理此问题的正确方法是什么

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { formName : ''}
        this.handleFormName = this.handleFormName.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleFormName(e) {
        console.log(e.target.value);
        this.setState({ formName: e.target.value });
    }

    handleSubmit(event) {
        console.log(this.state.formName);
        axios.post(this.props.UrlPost, { FirstName: this.state.formName })
          .then(function (response) {
          });
        event.preventDefault();
    }

    render() {
        return (
          <form onSubmit={this.handleSubmit}>
        <label>
            Name:
          <input type="text" value={this.props.Name}  onChange={this.handleFormName} />
        </label>
         <input type="submit" value="Submit" />
      </form>
    );
        }
}

class ComponentWithGriddle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRowId: 0,
        };
    }
    onRowClick(row) {
        console.log(row.props.data.name);
        this.setState({ selectedRowId: row.props.data.id });
        this.props.handleNameChange(row.props.data.name);
    }
    render() {
        var rowMetadata = {bodyCssClassName: rowData => (rowData.id === this.state.selectedRowId ? "selected" : '')};
        //console.log(rowMetadata);
        return (
        <Griddle results={fakeData} onRowClick={this.onRowClick.bind(this)} columnMetadata={columnMeta} useFixedHeader={true} rowMetadata={rowMetadata} useGriddleStyles={true} />
        );
     }
}

class RootFrame extends React.Component {
    constructor(props) {
        super(props);
        this.handleNameChange = this.handleNameChange.bind(this);
        this.state = { Name: '' };
    }

    handleNameChange(name)
    {
        this.setState({ Name: name });
    }
    render() {
        return (
        <div>
            <ComponentWithGriddle Name={this.state.Name} handleNameChange={this.handleNameChange} />
            <NameForm UrlPost={this.props.UrlPost}  Name={this.state.Name}/>
        </div>
       );
    };
}


var emptyData = [];

var columnMeta = [
  {
      "columnName": "id",
      "order": 1,
      "locked": false,
      "visible": true,
      "displayName": "ID"
  },
  {
      "columnName": "name",
      "order": 2,
      "locked": false,
      "visible": true,
      "displayName": "Name"
  },
  {
      "columnName": "city",
      "order": 3,
      "locked": false,
      "visible": true
  },
  {
      "columnName": "state",
      "order": 4,
      "locked": false,
      "visible": true
  },
  {
      "columnName": "country",
      "order": 5,
      "locked": false,
      "visible": true
  },
  {
      "columnName": "company",
      "order": 6,
      "locked": false,
      "visible": true
  },
  {
      "columnName": "favoriteNumber",
      "order": 7,
      "locked": false,
      "visible": true,
      "displayName": "Favorite Number"
  }
];

var rowMeta =
{
    "key": "id"
};

var propertyGridMeta = [
  {
      "columnName": "property",
      "order": 1,
      "locked": false,
      "visible": true,
      "cssClassName": "properties-name",
      "displayName": "Property"
  },
  {
      "columnName": "description",
      "order": 2,
      "locked": false,
      "visible": true,
      "cssClassName": "properties-description",
      "displayName": "Description"
  },
  {
      "columnName": "type",
      "order": 3,
      "locked": false,
      "visible": true,
      "cssClassName": "properties-type",
      "displayName": "Type"
  },
  {
      "columnName": "default",
      "order": 4,
      "locked": false,
      "visible": true,
      "cssClassName": "properties-default",
      "displayName": "Default"
  }
]

var fakeData = [
  {
      "id": 0,
      "name": "Mayer Leonard",
      "city": "Kapowsin",
      "state": "Hawaii",
      "country": "United Kingdom",
      "company": "Ovolo",
      "favoriteNumber": 7
  },
  {
      "id": 1,
      "name": "Koch Becker",
      "city": "Johnsonburg",
      "state": "New Jersey",
      "country": "Madagascar",
      "company": "Eventage",
      "favoriteNumber": 2
  },
  {
      "id": 2,
      "name": "Lowery Hopkins",
      "city": "Blanco",
      "state": "Arizona",
      "country": "Ukraine",
      "company": "Comtext",
      "favoriteNumber": 3
  },
];



ReactDOM.render(<RootFrame UrlPost={'Home/SaveData'}/>,
        document.getElementById("demoForm"));

类名称表单扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={formName:'}
this.handleFormName=this.handleFormName.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleFormName（e）{
console.log（如target.value）；
this.setState（{formName:e.target.value}）；
}
handleSubmit（事件）{
console.log（this.state.formName）；
post（this.props.UrlPost，{FirstName:this.state.formName}）
.然后（功能（响应）{
});
event.preventDefault（）；
}
render（）{
返回(
姓名：
);
}
}
类ComponentWithGriddle扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
selectedRowId:0，
};
}
onrow单击（行）{
log（row.props.data.name）；
this.setState（{selectedRowId:row.props.data.id}）；
this.props.handleNameChange（row.props.data.name）；
}
render（）{
var rowMetadata={bodyCssClassName:rowData=>（rowData.id==this.state.selectedRowId？“selected”：“”）}；
//console.log（rowmatadata）；
返回(
);
}
}
类RootFrame扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleNameChange=this.handleNameChange.bind（this）；
this.state={Name:''}；
}
handleNameChange（名称）
{
this.setState（{Name:Name}）；
}
render（）{
返回(
);
};
}
var emptyData=[]；
变量columnMeta=[
{
“columnName”：“id”，
"命令":一,，
“锁定”：false，
“可见”：真实，
“displayName”：“ID”
},
{
“columnName”：“name”，
"命令":二,，
“锁定”：false，
“可见”：真实，
“显示名称”：“名称”
},
{
“columnName”：“城市”，
“命令”：3，
“锁定”：false，
“可见”：真实
},
{
“columnName”：“state”，
“命令”：4，
“锁定”：false，
“可见”：真实
},
{
“columnName”：“国家”，
“命令”：5，
“锁定”：false，
“可见”：真实
},
{
“columnName”：“公司”，
“命令”：6，
“锁定”：false，
“可见”：真实
},
{
“columnName”：“favoriteNumber”，
“命令”：7，
“锁定”：false，
“可见”：真实，
“displayName”：“最喜爱的号码”
}
];
var rowMeta=
{
“密钥”：“id”
};
var propertyGridMeta=[
{
“columnName”：“属性”，
"命令":一,，
“锁定”：false，
“可见”：真实，
“cssClassName”：“属性名称”，
“displayName”：“属性”
},
{
“columnName”：“说明”，
"命令":二,，
“锁定”：false，
“可见”：真实，
“cssClassName”：“属性描述”，
“显示名称”：“说明”
},
{
“columnName”：“类型”，
“命令”：3，
“锁定”：false，
“可见”：真实，
“cssClassName”：“属性类型”，
“显示名称”：“类型”
},
{
“columnName”：“默认值”，
“命令”：4，
“锁定”：false，
“可见”：真实，
“cssClassName”：“属性默认值”，
“displayName”：“默认值”
}
]
var fakeData=[
{
“id”：0，
“姓名”：“迈耶·伦纳德”，
“城市”：“卡波辛”，
“州”：“夏威夷”，
“国家”：“联合王国”，
“公司”：“Ovolo”，
“favoriteNumber”：7
},
{
“id”：1，
“姓名”：“科赫贝克尔”，
“城市”：“约翰逊堡”，
“州”：“新泽西州”，
“国家”：“马达加斯加”，
“公司”：“事件时代”，
“favoriteNumber”：2
},
{
“id”：2，
“姓名”：“Lowery Hopkins”，
“城市”：“布兰科”，
“州”：“亚利桑那州”，
“国家”：“乌克兰”，
“公司”：“Comtext”，
“favoriteNumber”：3
},
];
ReactDOM.render（，
document.getElementById（“demoForm”）；

基本上，我正在尝试选择一行，同时可以更改名称并单击submit

从网格中选择的行

---

从“名称”字段，用户可以更改名称。

您的输入无效，因为您正在为输入设置静态值

this.props.Name

。为了编辑您的输入并仍然使用

this.props.Name

设置初始值，您应该使用state

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { formName : '', inputName: ''}
        this.handleFormName = this.handleFormName.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    componentDidMount() {
      this.setState({inputName: this.props.Name});
    }
    handleFormName(e) {
        console.log(e.target.value);
        this.setState({ formName: e.target.value });
    }

    handleSubmit(event) {
        console.log(this.state.formName);
        this.setState({inputName: event.target.value});
        axios.post(this.props.UrlPost, { FirstName: this.state.formName })
          .then(function (response) {
          });
        event.preventDefault();
    }

    render() {
        return (
          <form onSubmit={this.handleSubmit}>
        <label>
            Name:
          <input type="text" value={this.state.inputName}  onChange={this.handleFormName.bind(this)} />
        </label>
         <input type="submit" value="Submit" />
      </form>
    );
        }
}

类名称表单扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={formName:''，inputName:''}
this.handleFormName=this.handleFormName.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
componentDidMount（）{
this.setState（{inputName:this.props.Name}）；
}
handleFormName（e）{
console.log（如target.value）；
this.setState（{formName:e.target.value}）；
}
handleSubmit（事件）{
console.log（this.state.formName）；
this.setState（{inputName:event.target.value}）；
post（this.props.UrlPost，{FirstName:this.state.formName}）
.然后（功能（响应）{
});
event.preventDefault（）；
}
render（）{
返回(
姓名：
);
}
}

您的输入不起作用，因为您正在为输入设置一个静态值

this.props.Name

。为了编辑您的输入并仍然使用

this.props.Name

设置初始值，您应该使用state

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { formName : '', inputName: ''}
        this.handleFormName = this.handleFormName.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    componentDidMount() {
      this.setState({inputName: this.props.Name});
    }
    handleFormName(e) {
        console.log(e.target.value);
        this.setState({ formName: e.target.value });
    }

    handleSubmit(event) {
        console.log(this.state.formName);
        this.setState({inputName: event.target.value});
        axios.post(this.props.UrlPost, { FirstName: this.state.formName })
          .then(function (response) {
          });
        event.preventDefault();
    }

    render() {
        return (
          <form onSubmit={this.handleSubmit}>
        <label>
            Name:
          <input type="text" value={this.state.inputName}  onChange={this.handleFormName.bind(this)} />
        </label>
         <input type="submit" value="Submit" />
      </form>
    );
        }
}

类名称表单扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={formName:''，inputName:''}