问题描述:

What I want:

I want to create a modal form in order to edit a table.

I click on edit at the end of the line of my table, a modal form opens, I can edit my input values, and save or close.

But I would like, when I update my form in my modal, ==> the table behind the modal updates itself.

What I did:

Everything is working, except the update "in live" of my table.

My code:

const Trigger = React.createClass({

getInitialState() {

return {

show: false,

name: this.props.name,

start: this.props.start,

end: this.props.end,

id: this.props.id

};

},

save: function(){

var data = {

name: this.state.name,

start: this.state.start,

end: this.state.end,

id: this.state.id

};

$.ajax({

...

});

},

handleNameChange: function(event) {

this.setState({ name: event.target.value });

},

handleStartChange: function(event) {

this.setState({ start: event.target.value });

},

handleEndChange: function(event) {

this.setState({ end: event.target.value });

},

render() {

let close = () => this.setState({ show: false});

var name = this.state.name;

var start = this.state.start;

var end = this.state.end;

return (

<div className="modal-container">

<Button

bsStyle="primary"

bsSize="large"

onClick={() => this.setState({ show: true})}

>

Edit

</Button>

<Modal

show={this.state.show}

onHide={close}

container={this}

aria-labelledby="contained-modal-title"

>

<Modal.Header closeButton>

<Modal.Title id="contained-modal-title">Edit Presentation</Modal.Title>

</Modal.Header>

<Modal.Body>

<form className="form-horizontal">

<Input type="text" label="Name" labelClassName="col-xs-2" wrapperClassName="col-xs-10" value={name} onChange={this.handleNameChange}/>

<Input type="text" label="Start" labelClassName="col-xs-2" wrapperClassName="col-xs-10" value={start} onChange={this.handleStartChange}/>

<Input type="text" label="End" labelClassName="col-xs-2" wrapperClassName="col-xs-10" value={end} onChange={this.handleEndChange}/>

</form>

</Modal.Body>

<Modal.Footer>

<Button onClick={this.save}>Save</Button>

<Button onClick={close}>Close</Button>

</Modal.Footer>

</Modal>

</div>

);

}

});

var Presentations = React.createClass({

mixins: [React.addons.LinkedStateMixin],

loadPresentationsFromServer: function(){

AJAX...

this.setState({presentations_parse: data});

},

getInitialState: function() {

return {

presentations_parse: []

};

},

componentDidMount: function() {

this.loadPresentationsFromServer();

setInterval(this.loadPresentationsFromServer, this.props.pollInterval);

},

render: function(){

var presentations = this.state.presentations_parse.map(function(presentation) {

return (

<tr key={presentation.objectId}>

<td >#</td>

<td >{presentation.name}</td>

<td >{presentation.start.iso}</td>

<td >{presentation.end.iso}</td>

<td ><Trigger id={presentation.objectId} name={presentation.name} start={presentation.start.iso} end={presentation.end.iso}/></td>

</tr>

);

});

const tableInstance = (

<Table striped bordered condensed hover>

<thead>

<tr>

<th>#</th>

<th>Name</th>

<th>Start</th>

<th>End</th>

<th>Edit</th>

</tr>

</thead>

<tbody>

{presentations}

</tbody>

</Table>

);

return (

tableInstance

);

}}

);

The problem:

I try to use linkState, I included mixins: [React.addons.LinkedStateMixin].

I wrote valueLink={this.linkState('presentation.name')} inside the map function.

The problem is this.linkState is undefined.

I can't figure out how to implement this.linkState('...?...'), where to write it, because I use a map function.

I don't know how to link the linkState with the presentation. (presentations = {presentation 1, presentation 2, presentation n})

EDIT 1

The problem doesn't come from LinkedStateMixin, because I tried this code and it works:

var DisplayContainer2 = React.createClass({

mixins: [React.addons.LinkedStateMixin],

getInitialState:function(){

return{

value:'My Value'

}

},

render:function(){

return (

<div className="DisplayContainer">

<h4>{this.state.value}</h4>

<InputBox2 valueLink={this.linkState('value')} />

</div>

);

}

});

var InputBox2 = React.createClass({

render:function(){

return (<input type="text" valueLink={this.props.valueLink} />)

}

});

So I think it is because I write this.linkState in the map function.

But I don't know where else to write it.

Any idea?

EDIT 2:

I change my code here, to use the optional thisArg parameter in map.

I understand the problem, I no longer have the problem this.linkState is undefined.

But two other problems:

  1. Uncaught Error: Minified exception
  2. How can I use multiple linkState? I want to use one for each column of my table.

网友答案:

I think this is a simple scope issue.

Try it this way

render(or wtv function): function() {
    var self = this;
    newarray = someStuff.map(function() {
        self.MyHigherScopeMixin ...

    })
}

That or use the call/apply functions.

Hope it helps

相关阅读:
Top