Question

嗨，所以我的React组件在html中呈现并使用一个catch。

Catch是“data-reactid =”。0.0“”这会打破输入并阻止您输入它。一旦我删除/更改它，输入就会再次起作用。

我的反应组件：

1.2.4

如何在html中呈现：

/** @jsx React.DOM */

var React = require('../../../../node_modules/react/react.js');
// react component DateBox will return a date time that updates every 50 miliseconds and appends it to a div with an id of 'date_box'
var GoogleSearchBox = React.createClass({
    GetValueFromGoogleSearchInput: function(event){
        var GoogleSearch = document.getElementById("google_search_input");
        var UserSearchQuery = GoogleSearch.value.toString().replace(/ /g,"+");
        var GET = "http://google.com/#q=" + UserSearchQuery;
        window.open(GET, '_blank');
    },
    //rendering the html elements with the state.clock
    render: function() {
        return (
            <div className="google_search">
                <input type="text" value="" placeholder="Type here to search google" name="google_search_input" id="google_search_input">
                </input>
                <div>
                    <button id="google_search_button" onClick={this.GetValueFromGoogleSearchInput}></button>
                </div>
            </div>
        );
    }
}); 
//rendering with react to put onto the html
module.exports = GoogleSearchBox;

Answer 1

您的文字字段未响应用户输入，因为您通过手动设置// Create a new empty <p> element. var childtest = document.createElement('p'); // Set the innerHTML. childtest.innerHTML = employees[1].firstname; // Append that <p> element. first.appendChild(childtest);道具创建了Controlled Component。

设置value的{{1}}是受控制的组件。在一个受控制的 <input>，渲染元素的值将始终反映 value道具。

如果您想设置默认值但允许文本字段响应用户输入，请考虑设置<input>道具。

value

在React.js中，data-reactid打破了html文本输入？

1 个答案: