Javascript 如何允许在呈现的组件中更改输入？我要提升状态吗？

我设法获得了要在页面上呈现的值Hello和World，但到目前为止，它们无法修改。当我点击它时，文本光标出现，但任何键盘输入都无法识别。我该怎么做才能接收输入，比如删除字符或添加字符

formatoc.js：

{...
var props = {
    'name' : 'form',
    'timer' : 1500,
    'callback' : function(id, validity, value) {console.log(id, validity, value);},
    'values': ["hello", "world"],

    'node' : new FormatOC.ArrayNode({"__array__":"unique", "__type__":"string","__minimum__":1,"__maximum__":200,"__component__":"Input"})
}

React.render(React.createElement(ArrayNodeComponent, props), document.getElementById('react-component')); 
...}

Array_Node.jsx：

 {...
    childChange: function(name, valid, value) {
        // update state

        this.state.values[name] = value;
        this.setState(this.state);

        console.log(name,value);

        // Call parent callback
        this.props.callback(
            this.props.name,
            this.props.newParent.valid(this.state.values),
            this.state.values
        );
    },

        render: function() {
            var that = this;
            console.log("Hello World");

            return (
                <div id = "form">
                {this.props.values.map(function(v, i) {
                    return (
                        <div>
                        {(that.props.node.get().constructor.name === "Parent") ?
                        <ParentComponent
                            name={that.props.name + i}
                            key={i}
                            timer={that.props.timer}
                            callback={that.childChange}
                            values={v}
                            newParent={that.props.node.get()}
                        />
                        :
                        <NodeComponent
                            name={that.props.name + i}
                            key={i}
                            timer={that.props.timer}
                            callback={that.childChange}
                            value={v}
                            newNode={that.props.node.get()}
                        />
                        }
                        </div>
                    )
                })}
                </div>
           )
        }
  ...}

更新：当我尝试为字段提供任何文本输入时，控制台会出现以下错误：

未捕获的TypeError:无法读取未定义的属性“valid” 在Constructor.childChange数组_node.js:64 在Node.js:36上有两件事：

第一: childChange:functionname，有效，值{ //更新状态

    this.state.values[name] = value; //<- This is a no no
    this.setState(this.state);

...

传递包含要执行的变异的对象

第二： 实际上，您没有在道具中的任何位置传递此新父项

---

正如评论中所指出的，你不应该试图把父母/孩子之间的交流拼凑在一起。

Do statelifiting@RIYAJKHAN我试着在谷歌上查找它，但不确定如何提升状态，你有什么建议吗？谢谢。我是否可以替换这个。state.values[名称]=值；this.setStatethis.state；仅使用this.setState{values:value}；？至于newParent项，我应该把它传递给什么？@Sam是的。你应该只使用setState来改变state。至于newParent问题，我想你需要看看你在哪里创建NodeComponent并设置newNode而不是newParent。我刚刚添加了NodeComponent代码，它设置了newNode而不是newParent。我应该更改这个吗。props.newParent.validthis.state.values，改为this.props.newNode.validthis.state.values？@Sam我说错了。我认为问题在于您的childChange方法中的数组_Node.jsx，您试图调用父对象的回调。您需要做什么，我不知道。我通过修复this.props.newParent.valid来解决它现在，每当我调用.valid函数时，它总是返回false，因为它用字符串值覆盖数组值。有没有办法将值保留在数组中，并用更改的内容修改特定元素？

    this.state.values[name] = value; //<- This is a no no
    this.setState(this.state);

...

this.setState({values: value});