怎么做 <input> 价值灵活

Question

I have two ReactJS components, the first one will display a grid. When a row is clicked, it will populate the 2 component with Name.

But when I try to edit the input box, it cannot be changed. What are the proper way in ReactJS to handle this.

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"));

Essentially, I am trying to select a row, at the same time be able to change the name and click submit.

Selected row from grid

From the "Name" field, user can change the name.

Answer 1

Your input doesnt work because you are setting a static value this.props.Name for the input. In order to edit your input and still set the initial value with this.props.Name you should make use of 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>
    );
        }
}