反应 - 为什么文本框在渲染时不能清除？

我想要一个可重用的文本组件。我的todo应用程序应该在创建新项目后清除文本框。所以我setState更新列表和一个空白文本框。但是文本框没有被清除。反应 - 为什么文本框在渲染时不能清除？

console.log行使文本框呈现一个空白字符串。但是旧的字符串仍然存在。

出了什么问题？

var Textbox = React.createClass({ 

    getDefaultProps: function() { 
    return { 
     text: "" 
    }; 
    }, 

    handleChange: function(event) { 
    this.props.callback(event.target.value); 
    }, 

    render: function() { 
    console.log("textbox render", this.props.text) 
    return <div> 
     <label>{this.props.label}</label> 
     <input 
     type="text" 
     defaultValue={this.props.text} 
     onChange={this.handleChange} /> 
    </div> 
    } 
});

这里是增加了一个项目的方法的摘录，this.state.newItem是包含文本状态的项目。

addNewItem: function() { 
    console.log("add new"); 
    this.state.items.push({ 
     display: this.state.newItem, 
     id: uuid() 
    }); 
    this.setState({ 
     newItem: "", 
     items: this.state.items 
    }); 
    },

当然，文本框呈现与newItem：回报添加新

来源

2015-07-28 aitchnyu

你可以创建一个小提琴！ – Vishnu

你不应该直接改变状态，而是创建对象'var newItems = this.state.items;'然后'newItems.push（{something}）'和'this.setState（{newItem：“”，items： newItems}' – knowbody

您需要将文本框的文本保存到使用onChange其状态，然后通过文本框支柱value={this.state.value}。然后，当您要清除文本框时，只需将状态值设置为''即可。你可能会想要有一个初始状态return {value:''};所以，真的，只需采取默认道具，并使其默认状态等。

来源

2015-07-28 08:32:49

这将创建一个受控组件，我不认为OP需要它 –

OP已经在他的代码中使用了状态，所以他认为他可以重新使用它，这将是非常丑陋的状态 - 请参阅https：// facebook.github.io/react/docs/forms.html –

我并不是建议不要使用状态，你也可以使用不受控制的组件。 –

反应 - 为什么文本框在渲染时不能清除？

回答

相关问题