Question

我设法在页面上显示值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>
           )
        }
  ...}

Node.jsx：

onChange: function(event) {
  that = this;

  var event2 = event.target;

  if (this.state.component === "Input") {

    if (this.timer !== null) {
      clearTimeout(this.timer);
    };
    this.timer = setTimeout(function(){
        that.state.value = event2.value;

        that.props.callback(that.props.name, that.props.newNode.valid(that.state.value), that.state.value);

    }, this.props.timer);

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

Uncaught TypeError: Cannot read property 'valid' of undefined at Constructor.childChange (array_node.js:64) at Node.js:36

Answer 1

两件事：

<强>首先： childChange：function（name，valid，value）{ //更新状态

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

...

你正在直接改变state，这是一个很大的禁忌。直接变异状态会导致意外的副作用。这就是setState()方法的原因。您应该像这样设置状态：

this.setState({values: value});

传递包含您要执行的突变的对象。

<强>第二你实际上并没有在你的道具中传递这个newParent项目。

正如评论所指出的那样，你应该lifting state而不是试图破解某种父母/子女的沟通。

如何允许渲染的reactjs组件中的输入更改？我举起州吗？

1 个答案: