小编tka*_*h99的帖子

我在 React Select 中有一个下拉菜单，我面临焦点问题。每当我们打开下拉菜单时，选项列表中的第一项就会获得焦点。有几个属性被传递，但没有一个用于禁用此功能。我在他们的 github 中看到了与自动对焦相关的问题。但该道具仍然没有添加到他们的包中。我尝试使用焦点道具，但没有得到预期的结果。这是我的选择下拉列表的代码。

<Select 
     className="profile-module-select-container"
     classNamePrefix="profile-module-select"
     defaultValue={{value: 0, label: 0}}
     options={options}
     openMenuOnFocus={false}
     autoFocus={options.isFocused}
     styles={styles}
     onChange={selected => {
        this.setState({
        optionSelect: selected.value
        }, () => {onChange(this.state.optionSelect, formKey)});
      }}
        onMenuOpen={(e, i, o) => {
        this.setState({
        selectMenuOpen: true
        });
       }}
       onMenuClose={() => {
       this.setState({
       selectMenuOpen: false
       });
       }}
       components={
          {
           IndicatorSeparator:() => null,
           DropdownIndicator: DropdownCaret,
           Placeholder: CustomPlaceholder,
           Option: CustomOptionComponent
           }
          }
           placeholder={placeholder}
           isSearchable={false}
           isClearable={false}
           name={name}
           value={options.filter(option => {return option.value === value})}
      />

我使用 Wordpress 作为我的 CMS，并在 React 中创建一些页面并渲染它。我有一个用例，我需要在 React 组件内渲染 HTML DOM 节点。我在 querySelector() 的帮助下获取 DOM 节点，它返回 DOM 节点。在 React 中，我尝试使用 React.createElement 来渲染它。但它在我的页面上呈现为 [object HTMLDivElement]。

 render() {
      const { reactPages } = this.props;
      const innerPages = React.createElement('div', {id: "myDiv"}, `${reactPages.children[0]}`);
      
      return (
        <div className="react-cmp-container">
          <h3>React Container</h3>
          { innerPages }
        </div>
      )
    }
  }

我尝试的另一件事是使用angerlySetInnerHTML：

 rawMarkUp = () => {
      const { reactPages } = this.props;

      return {__html: reactPages}
    }

    render() {

      const innerPages = React.createElement('div', {id: "myDiv"}, )
      
      return (
        <div className="react-cmp-particle-container"> …

当我尝试在输入字段中设置组件的状态时，我遇到了一个问题。我曾尝试在构造函数中设置 Object 值，但这也不起作用。如果我删除道具，则输入字段不会获得任何值。我已经在下面发布了我的 JS 代码。

输入组件：

            <div className="form__group">
              <input
                className="form__field"
                id={props.name}
                name={props.name}
                type={props.inputtype}
                value={props.value}
                onChange={props.handleChange}
                placeholder={props.placeholder}
                {...props}
              />
              <label htmlFor={props.name} className="form__label">{props.placeholder}</label>
            </div>

JSX代码：

          <Input
            inputtype={"text"}
            title={"Full Name : "}
            name={"name"}
            value={this.state.newUser.name}
            handleChange={this.handleInput}
            placeholder={"Enter your Name"}
          />{" "}

JS代码：

class FormContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newUser: {
        name: "",
        age: "",
        gender: "",
        skills: [],
        about: ""
      },
this.handleInput = this.handleInput.bind(this);
}
  handleInput(e) {
    let value = e.target.value;
    let name = e.target.name;
    this.setState(
      prevState => ({ …