javascript - 如何使<input>值灵活

Question

我有两个 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"));

本质上，我试图选择一行，同时能够更改名称并单击提交。

从网格中选择行

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

Answer 1

您的输入不起作用，因为您正在为输入设置静态值 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>
    );
        }
}