Question

我正在尝试编写一个计算器类型的应用程序（即我给它一个输入列表，它对它们执行计算并显示结果），但是对于某些输入它并没有输入更改时更新输出。我的代码的相关部分：

class Results extends React.Component
{
    constructor (props)
    {
        super (props);
    }

    render ()
    {
        let entries = calculate (this.props);
        return  <div className="results">
                    {entries.map(e => <ResultRow key={e.code} code={e.code} name={e.name} />)}
                </div>;
    }
}
class CircuitRow extends React.Component
{
    constructor (props)
    {
        super (props);
        this.state = props.circuit;
        this.nameChange = this._nameChange.bind(this);
    }
    _nameChange (evt)
    {
        this.state.name = evt.target.value;
        this.setState (this.state);
        if (this.props.notifyChange) this.props.notifyChange (this.props.circuit);
    }
    render ()
    {
        return <tr>
            <td><input className="label" value={this.state.name} onChange={this.nameChange} /></td>
            (more fields deleted as not necessary to demonstrate issue)
        </tr>;
    }
}
class Form extends React.Component
{
    constructor(props) {
        super(props);
        this.state = {
            circuits: [ 
                { id: 1, name: "circuit 1", ... other fields ... },
                { id: 2, name: "circuit 2", ... },
                { id: 3, name: "circuit 3", ... } ],
            colours: "RBWK",
            nextRowId: 4
        };
        this.notifyCircuitChange = this._notifyCircuitChange.bind(this);
    }

    render ()
    {
        return  <div>
                  <form className='optionsForm'>
                    (working part of form for changing colours removed)
                    <table><tbody>
                      <tr><th>Circuit Name</th><th>Count</th></tr>
                      {this.state.circuits.map ((circuit, i) => 
                        <CircuitRow key={circuit.id} index={i} circuit={circuit} notifyChange={this.notifyCircuitChange} />)}
                    </tbody></table>
                  </form>
                  <Results colours={this.state.colours} circuits={this.state.circuits} />
                </div>;
    }

    _notifyCircuitChange (circuit) { this.setState(this.state); }

}


ReactDOM.render (<Form/>, document.getElementById('main'));

我没有显示执行工作的表单部分，包括一组用于更改Form.state.colours字符串内容的复选框 - 结果在成功更新时成功更新我改变了这些，但是当我改变名字时＃39;其中一个电路行的字段，新名称不会显示在结果表中，但旧名称会保留在那里。

为什么这不能更新？

Answer 1

我认为问题出在这个函数中，你从CircuitRow组件传递道具价值，就像你从父母那里收到的一样，你从孩子那里传递相同的价值，试试这个：

_nameChange (evt)
{
        let circuit = this.state.circuit;
        circuit.name = evt.target.value;
        this.setState({circuit});
        if (this.props.notifyChange) 
            this.props.notifyChange(circuit);
}

还有一件事，你需要将id传回父Form以更改此函数中parent的指定元素，因为在Form组件中你有一个数组od circuits你必须只更新特定的元素。像这样：

_nameChange (evt)
{
        let circuit = this.state.circuit;
        circuit.name = evt.target.value;
        this.setState({circuit});
        if (this.props.notifyChange) 
            this.props.notifyChange(circuit, this.props.key);
}

在_notifyCircuitChange方法中：

_notifyCircuitChange (circuit, id) 
{
    let circuits = this.state.circuits;
    for(let i in circuits){
        if(circuits[i].id == id){
            circuits[i] = circuit;
            break;
        }
    }
    this.setState({circuits});
}

Answer 2

在您的代码中，您将nameField的值存储为CircuitRow组件的状态，并且每次更改时，您都会在两个位置更新相同的内容：CircuitRow的状态和CircuitRow的状态。父母表格。相反，我建议您将nameField的值作为prop传递给CircuitRow组件，并显示每次发生更改时，您应该触发一个在父状态下更改相同的回调函数。

您的电路阵列最初看起来像这样：

[ 
  { id: 1, name: "circuit 1", value: "", ... other fields ... },
  { id: 2, name: "circuit 2", value: "", ... },
  { id: 3, name: "circuit 3", value: "", ... } ]

将值作为prop传递给每个CircuitRow组件，并在渲染中显示。在更改时，从CircuitRow触发notifyChange，更新Form组件中的值。

尽管在父

2 个答案: