javascript - 如何解决用户以redux-form插入获取反射值的下拉输入

Question

我正在使用 redux-form，我希望在编辑表单时获取用户插入的值。使用其他输入我没有任何问题，只有下拉（选择组件）。

我正在使用一个名为 ServiceForm 的类组件，它内部有一个名为 renderTodos 的功能组件。下拉菜单“relatedTodos”让我从 api rest 获取所有待办事项。

这是我的类组件：

           componentWillReceiveProps = nextProps => {
                // Load Contact Asynchronously
                   const { service } = nextProps;
                   if (service._id !== this.props.service._id) {
                   // Initialize form only once
                   this.props.initialize(service);
                   this.isUpdating = true;
                   }
                   };


                    componentDidMount(){

                         this.props.searchTodos();
                        }
                     constructor(props){
                           super(props);

                        this.state = {
                           //LOOK THE FOLLOWING LINE PLEASE
                           todo: props.todo.name};
                           };



                                onChange = (e) =>{
                                      this.setState({
                                      todo: e.target.value
                                          })
                                            } 



                      renderArrayTodos = ({fields, meta: { error,submitFailed}},input) => (
                          <dl>
                            <dt>
                              <button type="button" className='btn btn-primary' style= 
                               {{fontWeight:'bold',color:'black'}} onClick={() => 
                            fields.push()}>Add todo</button>
                             {submitFailed && error && <span>{error}</span>}
                                   </dt>
                               { fields.map((relatedTodo, index) =>

                                  <dd key={index}>
                          <br></br>
                     <button className='btn btn-primary' style={{fontWeight:'bold',color:'black'}}
                             type="button"
                              title="Remove Todo"
                                onClick={() => { fields && fields.remove(index)

                               }}> Remove </button>

                           <h4><b>Todo's widget number {index + 1}</b></h4>


                              <div className="row" style={
                                 {textAlign: 'center',
                                     justifyContent: 'center',
                                     paddingRight: 20,
                                     margin: '10 10px 10 10px'

                                    }}>

                                  <label style={{fontStyle: 
                             'arial',fontWeight:'bold',fontSize:17}}>Todo:</label> 


                              <Field
                                   className="custom-select d-block w-100" name={`${relatedTodo}`} 
                          value={this.state.todo} onChange={this.onChange.bind(this)} 
              component="select" placeholder={!input.value ? 'Please, insert a todo' : input.value}>

                            {/* <option value="" hidden style={{fontStyle: 
                           'arial',fontWeight:'bold'}}>Please, select a todo</option> */}

                              {/*PLACEHOLDER FOR TODO SELECT IN SERVICE FORM: Please, select a todo 
                           when I'm CREATING a service,ON THE CONTRARY when I'm EDITING a service, 
                            the placeholder will be the reflected todo value I inserted when I 
                            created the service.    e.g.   I inserted todo 5, when I'm EDITING the 
                         created service, only todo I inserted should be showed like todo 5. */}

                                       <option value={input.value} hidden style={{fontStyle: 
                        'arial',fontWeight:'bold'}}>{!input.value ? 'Please, select a todo' 
                      : input.value}</option>

                                { this.props.todoList.map(todo => {

                                       return(
                                      <option  key={todo._id}  value={todo._id} style={{fontStyle: 
                                       'arial',fontWeight:'bold'}} >{todo.name}</option>
                                                )
                                                 })}

                                                </Field> 


                                                    </div> 

                                                      </dd>
                                                   )
                                                    }

                                   {error && <dt className="error">{error}</dt>}
                                          </dl> 
                                   );

在这里，我将名为“searchTodos 和 todoList (reducer)”的操作与 api 连接起来：

             const actions = {

                    searchTodos

                     }; 

                    function mapState(state){

                         return {
                    todoList: state.todosSoftware.todoList
                      }
                       } 




                     ServiceForm= connect(mapState,actions)(ServiceForm); 

下拉列表名为“relatedTodos”，这些是按以下顺序排列的待办事项：“待办事项 1、待办事项 2、待办事项 3、待办事项 4、待办事项 5”。

当我创建服务时

                               e.g.

我正在参与我的服务，我正在单击“添加待办事项”按钮。添加一个名为${relatedTodo}. 我选择

                               e.g.

待办事项 5。

当我编辑只分配了一个待办事项的创建服务时，下拉菜单的占位符应该说“待办事项 5”而不是“请选择待办事项”或下拉菜单的第一个元素，即“待办事项 1”。

另一方面，当我编辑服务时，我遇到了这个错误：“无法读取未定义的名称”。此错误在以下代码行中。

            constructor(props){

                 super(props);

                     this.state = {

                        //IN THE FOLLOWING LINE IS THE ERROR

                           todo: props.name.todo
                          }


                    }

在服务表单中编辑服务时，select的值反映的是用户输入的值。

标签： javascriptreactjsreduxredux-formreact-select